Bootstrap捆綁了200多種字體格式的字形。首先讓我們先來理解一下什麼是字體圖示。
什麼是字體圖示? (推薦學習: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中文網其他相關文章!