부트 스트랩에서 사용자 아이콘 만들기

Question

다음은 내가 시도한 것입니다.

  <ul class="navbar-nav navbar-right"> 
        <li class="dropdown"> 
        <li class="divider-vertical"></li> 
        <li> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
          <label class="navbar-text" style="margin-top: 5px"> 
          <strong><h4>Shane<b class="caret" style="margin-left: 80px"></b></label></h4></strong> 
         </a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Action</a></li> 
          <li><a href="#">Another action</a></li> 
          <li><a href="#">Something else here</a></li> 
          <li class="divider"></li> 
          <li><a href="#">Separated link</a></li> 
         </ul>       
        </li>     
        </li> 
       </ul> 

이미지와 같은 아이콘을 가져 오는 방법에 대해서는 잘 모르겠습니다. 지금까지 시도한 상자가 있습니다.

http://jsbin.com/lotepeqo/1/

Answer 1

하는 <span>를 사용하여 시도하고 H4를 제거

    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
         <label class="navbar-text" style="margin-top: 5px"> 
         <span><img src="image/here"/> </span> 
         <strong><h4>Shane<b class="caret" style="margin-left: 80px"></b></label> 

가 실제로 http://www.hvac-hacks.com 작업 코드가 (이것은 전체 폭을 차지)과 여기 소스 :

 <!-- BEGIN User Menu (Top-Right ---> 
     <ul class="nav navbar-nav navbar-right pull-right navbar-usermenu" > 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle dropdown-toggle-usermenu" data-toggle="dropdown" > 
       <span> 
        <span><?php echo hh_get_profile_photo(get_current_user_id(), 44); ?></span> 
        <span class = "header-navbar-username" > 
          <?php echo $current_user->user_firstname ?> 
        </span> 
        <b class="caret"></b> 
       </span> 
       </a> 
       <?php if (current_user_can('manage_options')) : ?> 
        <ul class="dropdown-menu header-dropdown-menu"> 
         <li><a href="/"><i class="fa fa-home"></i>Home</a></li> 
         <li><a href="/post"><i class="fa fa-plus"></i>Post</a></li> 
         <li class="divider header-dropdown-menu-divider"></li> 
         <li class ="header-dropdown-menu-text">Admin</li> 
         <li><a href="/admin"><i class="fa fa-cogs"></i>Dashboard</a></li> 
         <?php if (is_singular()) { ?> 
          <li><?php edit_post_link('<i class="fa fa-pencil"></i>Edit Post'); ?></li> 
         <?php } ?> 

         <li class="divider header-dropdown-menu-divider"></li> 
         <li class ="header-dropdown-menu-text">Profile</li> 
         <li><a href="/edit-profile"><i class="fa fa-user"></i>Edit Profile</a></li> 
         <li class="divider header-dropdown-menu-divider"></li> 
         <li><a href="<?php echo wp_logout_url('/?loggedout=true'); ?>" ><i class="fa fa-power-off"></i>Sign Out</a></li> 
        </ul> 

       <?php else : ?> 
        <ul class="dropdown-menu header-dropdown-menu"> 
         <li><a href="/"><i class="fa fa-home"></i>Home</a></li> 
         <li><a href="/post"><i class="fa fa-plus"></i>Post</a></li> 
         <li class="divider header-dropdown-menu-divider"></li> 
         <li class ="header-dropdown-menu-text">Profile</li> 
         <li><a href="/edit-profile"><i class="fa fa-user"></i>Edit Profile</a></li> 
         <li class="divider header-dropdown-menu-divider"></li> 
         <li><a href="<?php echo wp_logout_url('/?loggedout=true'); ?>" ><i class="fa fa-power-off"></i>Sign Out</a></li> 
        </ul> 
       <?php endif; ?> 
      </li> 
     </ul> 
    <?php else : ?> 
     <div class="nav navbar-nav navbar-right pull-right header-login"> 
      <button onclick="jQuery('#loginbox').show()" class="btn btn-engage" type="button" role="button">Login <b class="caret"></b></button> 
     </div> 
    <?php endif; ?> 
    <!-- END User Menu (Top-Right ---> 

Answer 2

드롭 다운에는 캐럿이 아닌 글리프 콘을 사용해야합니다.

<b class="glyphicon glyphicon-chevron-down" style="margin-left: 80px"></b> 

당신은 이름을 꺼내 <span class="glyphicon glyphicon-user"></span>를 사용하거나 (당신의 모형에서와 같이) 대신 이미지를 사용할 수 있습니다.