html - 我如何将字形图标添加到我的导航栏项目？

Question

我想在我的导航栏项目之前添加一个字形图标，就像在这个页面中一样: http://skywarriorthemes.com/arcane/landing/

这是我的导航栏:HTML:

 <nav class="navbar navbar-inverse">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">Page 1</a></li>
                        <li><a href="#">Page 2</a></li>
                        <li class="navfixborder"><a href="#">Page 3</a></li>
                    </ul>
                </div>
            </div>
        </nav>

充满CSS: https://jsfiddle.net/Lystef91/

Answer 1

查看文档!

http://getbootstrap.com/components/给出这个例子:

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

假设您已经将图标包含到您的页面/CSS 中。这将取决于您的设置；如果您刚刚安装了现成的 Bootstrap ，我相信其中包括图标。如果我误解了你没有使用 bootstrap，说明仍然大致相同。大多数像这样的图标字体在空元素上使用类，无论您使用哪个类，都会在其演示页面上显示哪个类对应哪个图标。