bootstrap字體圖示怎麼使用

如果你想了解更多關於Bootstrap的知識，可以點選：Bootstrap教學

本篇文章將講解字體圖示(Glyphicons)，並透過一些實例了解它的使用。 Bootstrap 捆綁了 200 多種字體格式的字形。首先讓我們先來理解一下什麼是字體圖示。

什麼是字體圖示

　　字體圖示是在 Web 專案中使用的圖示字體。雖然，Glyphicons Halflings 需要商業許可，但您可以透過基於專案的 Bootstrap 來免費使用這些圖示。

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

取得字體圖示

在 fonts 資料夾內可以找到字體圖標，它包含了下列這些檔案：

●glyphicons-halflings-regular.eot

　　●glyphicons-halflings-regular.svg

　　●glyphicons-halflings-regular.ttf

」　●glyphicons-halflings-regular.ttf

」　　利

相關的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="max-width:90%">
  <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字體圖示怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！