字体图标的使用
程序员文章站
2024-02-16 10:38:10
...
1.初识字体图标
图标字体(iconfont):在网页中我们经常会用到一些小图标,我们可以通过图片来引入,但是图片比较大而且不灵活,我们可以使用iconfont,将图标当做字体来使用比较方便
1.fontsome
1.对于中文版本
地址: http://www.fontawesome.com.cn/
使用:
-
下载安装解压的项目目录
-
引入css文件
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
-
使用
<i class="fa fa-qq"></i> <!-- <i class="fa 图标代号"></i> -->
2.对于官方版本
地址: https://fontawesome.com/
使用:
-
下载安装解压的项目目录
-
引入css文件
<link rel="stylesheet" href="fontawsome/css/all.css">
3.使用
-
i标签
<i class="fas fa-bell" style="font-size:80px; color:red;"></i> <!-- <i class="fas/fab 图标代号"></i> -->
-
使用伪元素
li::before{ /* 通过伪元素来设置图标字体 1.找到要设置图标的元素通过before或after选中 2.在content中设置字体的编码 3.设置字体的样式 fab font-family: 'Font Awesome 5 Brands'; fas font-family: 'Font Awesome 5 Free'; font-weight: 900; */ content: '\f1b0'; /* content:'\图标编码' */ font-family: 'Font Awesome 5 Free'; /* font-family: 'Font Awesome 5 Brands'/Font Awesome 5 Free'; */ font-weight: 900; color: blue; margin-right: 10px; }
-
实体
<span class="fas"></span> #class为fas/fab 内容为&#x字体编码
2.iconfont
官方教程:https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.17&helptype=code
- 去图标库挑选图标并加入到购物车
- 将添加到购物车的图标添加到项目
- 下载到本地(以font-class为例)
-
解压到项目目录,引入文件夹下的iconfont.css文件
<link rel="stylesheet" href="font_1978411_h9v0gxtiux/iconfont.css">
-
使用
<i class="iconfont icon-xxx"></i> #选择合适的图标
图标代码可以再项目中看:
上一篇: java集合学习笔记
下一篇: Java NIO学习笔记