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字體圖標的使用方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。