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群

，及时关注我们的课程更新