bootstrap中如何使用字體圖標

本篇文章為大家展示了bootstrap中如何使用字體圖標，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

什么是字體圖標

　　字體圖標是在 Web 項目中使用的圖標字體。雖然，Glyphicons Halflings 需要商業許可，但是您可以通過基于項目的 Bootstrap 來免費使用這些圖標。

　　為了表示對圖標作者的感謝，希望您在使用時加上 GLYPHICONS 網站的鏈接。

獲取字體圖標

在 fonts 文件夾內可以找到字體圖標，它包含了下列這些文件：

　　●glyphicons-halflings-regular.eot

　　●glyphicons-halflings-regular.svg

　　●glyphicons-halflings-regular.ttf

　　●glyphicons-halflings-regular.woff

相關的 CSS 規則寫在 dist 文件夾內的 css 文件夾內的 bootstrap.css 和 bootstrap-min.css 文件上。

用法

如需使用圖標，只需要簡單地使用下面的代碼即可。請在圖標和文本之間保留適當的空間。

<span class="glyphicon glyphicon-search"></span>

下面的實例演示了如何使用字體圖標：

<p>    <button type="button" class="btn btn-default">        <span class="glyphicon glyphicon-sort-by-attributes"></span>    </button>    <button type="button" class="btn btn-default">        <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>    </button>    <button type="button" class="btn btn-default">        <span class="glyphicon glyphicon-sort-by-order"></span>    </button>    <button type="button" class="btn btn-default">        <span class="glyphicon glyphicon-sort-by-order-alt"></span>    </button></p><button type="button" class="btn btn-default btn-lg">    <span class="glyphicon glyphicon-user"></span> User</button><button type="button" class="btn btn-default btn-sm">    <span class="glyphicon glyphicon-user"></span> User</button><button type="button" class="btn btn-default btn-xs">    <span class="glyphicon glyphicon-user"></span> User</button>

結果如下所示：

帶有字體圖標的導航欄

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">    <div class="container">        <div class="navbar-header">            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">                <span class="sr-only">Toggle navigation</span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>            </button>            <a class="navbar-brand" href="#">Project name</a>        </div>        <div class="collapse navbar-collapse">            <ul class="nav navbar-nav">                <li class="active">                    <a href="#">                        <span class="glyphicon glyphicon-home">Home</span></a>                </li>                <li>                    <a href="#shop">                        <span class="glyphicon glyphicon-shopping-cart">Shop</span></a>                </li>                <li>                    <a href="#support">                        <span class="glyphicon glyphicon-headphones">Support</span></a>                </li>            </ul>        </div>        <!-- /.nav-collapse -->    </div>    <!-- /.container --></div><!-- jQuery (Bootstrap 插件需要引入) --><script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><!-- 包含了所有編譯插件 --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

定制字體圖標

我們已經看到如何使用字體圖標，接下來我們看看如何定制字體圖標。

我們將以上面的實例開始，并通過改變字體尺寸、顏色和應用文本陰影來進行定制圖標。

下面是開始的代碼：

<button type="button" class="btn btn-primary btn-lg">  <span class="glyphicon glyphicon-user"></span> User</button>

效果如下所示：

定制字體尺寸

通過增加或減少圖標的字體尺寸，您可以讓圖標看起來更大或更小

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">  <span class="glyphicon glyphicon-user"></span> User</button>

定制字體顏色

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">  <span class="glyphicon glyphicon-user"></span> User</button>

應用文本陰影

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">  <span class="glyphicon glyphicon-user"></span> User</button>

上述內容就是bootstrap中如何使用字體圖標，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。