使用img

Question

我想用img标签替换glyphicon。

目前下拉列表如下所示

<ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <span class="glyphicon glyphicon-user"></span>
                            <strong>Desmond</strong>
                            <span class="glyphicon glyphicon-chevron-down"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <div class="navbar-login">
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <p class="text-center">
                                                <span class="glyphicon glyphicon-user icon-size"></span>
                                            </p>
                                        </div>
                                        <div class="col-lg-8">
                                            <p class="text-left"><strong>Desmond Soh</strong></p>
                                            <p class="text-left small">Desmond@mail.com</p>
                                            <p class="text-left">
                                                <a href="#" class="btn btn-primary btn-block btn-sm">Profile</a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="divider navbar-login-session-bg"></li>
                            <li class="navbar-login-session-bg">
                                <div class="navbar-login navbar-login-session">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <p>
                                                <a href="#" class="btn btn-danger btn-block">Logout</a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>

如何更改代码行以使img更好地适应glyphicon？我相信我需要一个CSS来将它渲染到特定的大小。我尝试了很多方法但无济于事。请帮帮我谢谢。

Answer 1

您需要使用img或div标签替换span标记：

• 使用IMG标记和href到首选图像
• 使用DIV标记和CSS背景属性

以下是使用.glyphicon类替换span标记的示例：

<强> HTML

 <div class="imgPlaceholder></div>

<强> CSS

.imgPlaceholder{

    background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll;
    background-color:#0C0C0C;
    background-size: 100% 100%;
    height:100px;
    width:100px;
}