引入拓展字体
杨甘琼 2022/5/16 jsp
sce项目搭配的框架bootstrap其中默认内置一部分字体图标,但在实际开发过程中,这些字体可能不能够满足我们的需要。此时就需要增加拓展的字体文件,下面是使用拓展字体相关内容,请往下面阅读
# 为什么使用字体
- 多个图标字体合成一个字体文件,避免每张图片都需要联网请求;
- 字体可任意缩放,而图片放大会失真、缩小则浪费像素;
- 可通过css任意改变颜色、设置阴影及透明效果;
# 获取iconfont文件
下载iconfont图标可以访问阿里巴巴矢量图标库 https://www.iconfont.cn/
![]()
![]()
![]()
![]()
# 解压并应用到项目中
![]()
![]()
![]()
# 最终的实现效果
![]()
注:class中使用两个样式 iconfont 在我们创建项目的时候设置的font_family,iconfont为默认值,一般不做修改,icon-则是前缀 -xxx则是具体的字体名称,这个名称在下载之前可以单独修改编辑