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&gt;
LineAwesome	<https://icons8.com/line-awesome&gt;
SocialIcons	<http://www.socicon.com/chart.php&gt;
阿里巴巴矢量圖標庫	<http://www.iconfont.cn&gt;

以 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&gt;
• <https://gitee.com/work100-net/training-stage2/tree/master/hello-bootstrap&gt;

---

上一篇：表格

---

如果對課程內容感興趣，可以掃碼關注我們的 公衆號 或 QQ羣，及時關注我們的課程更新