add avatar

app/mycard.component.css

+.nav-right {
+    float: right;
+}
+
+#avatar {
+    display: block;
+    float: left;
+    border-radius: 50%;
+    height: 2rem;
+    padding: 0.175rem;
+}
\ No newline at end of file

app/mycard.component.html

@@ -2,7 +2,7 @@
     <a class="navbar-brand" href="#">Project name</a>
     <ul class="nav navbar-nav">
         <li class="nav-item active">
-            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+            <a class="nav-link" href="#">商店<span class="sr-only">(current)</span></a>
         </li>
         <li class="nav-item">
             <a class="nav-link" href="#">About</a>
@@ -10,6 +10,11 @@
         <li class="nav-item">
             <a class="nav-link" href="#">Contact</a>
         </li>
+        <div class="nav-right">
+            <a href="#">
+                <img class="img-circle" id="avatar" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_156e9ce46fa%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_156e9ce46fa%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.65%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="image">
+            </a>
+        </div>
     </ul>
 </nav>