Java單體應用 - 常用架構 - 01.Bootstrap - 字型圖示

原文位址： http://www.work100.net/training/monolithic-frameworks-bootstrap-glyphicons.html 更多教程： 光束雲 - 免費課程

字型圖示

序号	文内章節	視訊
1	概述	-
2	下載下傳字型圖示
3	使用字型圖示

請參照如上

章節導航

進行閱讀

1.概述

所謂字型圖示，就是使用字型（Font）格式的字形做成了圖示。

2.下載下傳字型圖示

Bootstrap 4 預設未包含字型圖示庫，但可以下載下傳第三方圖示庫：

圖示庫	位址
FontAwesome	http://fontawesome.dashgame.com/ http://fontawesome.dashgame.com/
LineAwesome	https://icons8.com/line-awesome/ https://icons8.com/line-awesome/
SocialIcons	http://www.socicon.com/chart.php http://www.socicon.com/chart.php
阿裡巴巴矢量圖示庫	http://www.iconfont.cn/ http://www.iconfont.cn/

以

FontAwesome

圖示庫為例，下載下傳、解壓縮後将檔案複制到 Bootstrap 目錄下，如圖：

3.使用字型圖示

如需使用圖示，需要引入圖示樣式：

<link href="./assets/plugins/bootstrap/font-awesome/css/font-awesome.min.css" type="text/css" rel="stylesheet">           

圖示使用代碼如下：

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x           

源碼擷取

執行個體源碼已經托管到如下位址：

• https://github.com/work100-net/training-stage2/tree/master/hello-bootstrap https://github.com/work100-net/training-stage2/tree/master/hello-bootstrap
• https://gitee.com/work100-net/training-stage2/tree/master/hello-bootstrap https://gitee.com/work100-net/training-stage2/tree/master/hello-bootstrap

上一篇：

表格

如果對課程内容感興趣，可以掃碼關注我們的

公衆号

或

QQ群

，及時關注我們的課程更新