标签:iconfont -o 更新 font 视频 ext load 概述 矢量
原文地址:http://www.work100.net/training/monolithic-frameworks-bootstrap-glyphicons.html序号 | 文内章节 | 视频 |
---|---|---|
1 | 概述 | - |
2 | 下载字体图标 | - |
3 | 使用字体图标 | - |
请参照如上章节导航
进行阅读
所谓字体图标,就是使用字体(Font)格式的字形做成了图标。
Bootstrap 4 默认未包含字体图标库,但可以下载第三方图标库:
图标库 | 地址 |
---|---|
FontAwesome | <http://fontawesome.dashgame.com> |
LineAwesome | <https://icons8.com/line-awesome> |
SocialIcons | <http://www.socicon.com/chart.php> |
阿里巴巴矢量图标库 | <http://www.iconfont.cn> |
以 FontAwesome
图标库为例,下载、解压缩后将文件复制到 Bootstrap 目录下,如图:
如需使用图标,需要引入图标样式:
<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
实例源码已经托管到如下地址:
上一篇:表格
如果对课程内容感兴趣,可以扫码关注我们的
公众号
或QQ群
,及时关注我们的课程更新
Java单体应用 - 常用框架 - 01.Bootstrap - 字体图标
标签:iconfont -o 更新 font 视频 ext load 概述 矢量
原文地址:https://blog.51cto.com/14735583/2479104