首頁 > web前端 > Bootstrap教程 > bootstrap字體圖示怎麼使用方法

bootstrap字體圖示怎麼使用方法

(*-*)浩
發布: 2019-07-11 13:31:56
原創
3429 人瀏覽過

Bootstrap捆綁了200多種字體格式的字形。首先讓我們先來理解一下什麼是字體圖示。

bootstrap字體圖示怎麼使用方法

什麼是字體圖示? (推薦學習:Bootstrap影片教學

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

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

取得字型圖示

我們已經在 環境安裝 章節下載了 Bootstrap 3.x 版本,並且了解它的目錄結構。在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文件上。

這裡有200個class,每個class針對一個圖示。這些class的常見格式如下:

.glyphicon-keyword:before {
  content: "hexvalue";
 }
登入後複製

如需使用圖標,只需要簡單地使用下面的程式碼。請在圖示和文字之間保留適當的空間。

<span class="glyphicon glyphicon-search"></span>
登入後複製

更多Bootstrap相關技術文章,請造訪Bootstrap教學欄位進行學習!

以上是bootstrap字體圖示怎麼使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板