码迷,mamicode.com
首页 > 编程语言 > 详细

Java单体应用 - 常用框架 - 01.Bootstrap - 字体图标

时间:2020-03-17 08:12:47      阅读:74      评论:0      收藏:0      [点我收藏+]

标签:iconfont   -o   更新   font   视频   ext   load   概述   矢量   

原文地址:http://www.work100.net/training/monolithic-frameworks-bootstrap-glyphicons.html
更多教程:光束云 - 免费课程

字体图标

序号 文内章节 视频
1 概述 -
2 下载字体图标 -
3 使用字体图标 -

请参照如上章节导航进行阅读

1.概述

所谓字体图标,就是使用字体(Font)格式的字形做成了图标。

2.下载字体图标

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 目录下,如图:

技术图片

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

源码获取

实例源码已经托管到如下地址:


上一篇:表格


如果对课程内容感兴趣,可以扫码关注我们的 公众号QQ群,及时关注我们的课程更新

技术图片
技术图片

Java单体应用 - 常用框架 - 01.Bootstrap - 字体图标

标签:iconfont   -o   更新   font   视频   ext   load   概述   矢量   

原文地址:https://blog.51cto.com/14735583/2479104

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!