bootstrap字體圖標(biāo)的使用方法

這篇文章將為大家詳細(xì)講解有關(guān)bootstrap字體圖標(biāo)的使用方法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

什么是字體圖標(biāo)

　　字體圖標(biāo)是在 Web 項(xiàng)目中使用的圖標(biāo)字體。雖然，Glyphicons Halflings 需要商業(yè)許可，但是您可以通過基于項(xiàng)目的 Bootstrap 來免費(fèi)使用這些圖標(biāo)。

　　為了表示對圖標(biāo)作者的感謝，希望您在使用時(shí)加上 GLYPHICONS 網(wǎng)站的鏈接。

獲取字體圖標(biāo)

在 fonts 文件夾內(nèi)可以找到字體圖標(biāo)，它包含了下列這些文件：

　　●glyphicons-halflings-regular.eot

　　●glyphicons-halflings-regular.svg

　　●glyphicons-halflings-regular.ttf

　　●glyphicons-halflings-regular.woff

相關(guān)的 CSS 規(guī)則寫在 dist 文件夾內(nèi)的 css 文件夾內(nèi)的 bootstrap.css 和 bootstrap-min.css 文件上。

用法

如需使用圖標(biāo)，只需要簡單地使用下面的代碼即可。請?jiān)趫D標(biāo)和文本之間保留適當(dāng)?shù)目臻g。

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

下面的實(shí)例演示了如何使用字體圖標(biāo)：

<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>

結(jié)果如下所示：

帶有字體圖標(biāo)的導(dǎo)航欄

<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>

定制字體圖標(biāo)

我們已經(jīng)看到如何使用字體圖標(biāo)，接下來我們看看如何定制字體圖標(biāo)。

我們將以上面的實(shí)例開始，并通過改變字體尺寸、顏色和應(yīng)用文本陰影來進(jìn)行定制圖標(biāo)。

下面是開始的代碼：

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

效果如下所示：

定制字體尺寸

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

<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>

應(yīng)用文本陰影

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

關(guān)于bootstrap字體圖標(biāo)的使用方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。