在引导中创建用户图标

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>

我只是不确定如何把图标像在图像。这是我到目前为止尝试过的bin。

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

Answer 1

下拉列表应该使用象形符号而不是克拉。

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

您可以去掉名称并使用<span class="glyphicon glyphicon-user"></span>或使用图像代替(如您的模型所示)。

Answer 2

尝试使用<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 --->