700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 引用字体图标的方法(iconfont)

引用字体图标的方法(iconfont)

时间:2024-08-04 11:43:40

相关推荐

引用字体图标的方法(iconfont)

iconfont-阿里巴巴矢量图标库

字体图标最大的好处在于它不会变形和加速度快,字体图标和文字一样,随意通过CSS来控制它的大小和颜色,对于搭建网站来说,非常方便。

下面我将以截图方式介绍字体图标的引用方法。

1.选取字体图标

2.将选取的字体图标添加至项目

3.下载字体图标压缩包文件

4.将字体文件以及CSS文件导入Web项目

5.修改CSS文件字体文件索引路径以及删除默认字体大小

@font-face {font-family: "iconfont"; /* Project id 3272961 */src: url('../fonts/iconfont.woff2?t=1648085640271') format('woff2'),url('../fonts/iconfont.woff?t=1648085640271') format('woff'),url('../fonts/iconfont.ttf?t=1648085640271') format('truetype');}.iconfont {font-family: "iconfont" !important;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-zhaoxiangji:before {content: "\e663";}

6.添加span标签以及添加字体属性(字体属性名称在CSS文件中查找)注意:设置字体font-size

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="css/iconfont.css"><title>Document</title><style>span {font-size: 40px;}</style></head><body><span class="iconfont icon-zhaoxiangji"></span></body></html>

7.添加字体图标成功

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。