字体图标的使用

最新推荐文章于 2024-09-05 18:54:04 发布

weixin_43833851

最新推荐文章于 2024-09-05 18:54:04 发布

阅读量531

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/weixin_43833851/article/details/122579895

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1，进入 https://www.iconfont.cn/ ，搜索要使用的图标，加入购物车

2，点击右上角的购物车-->添加至项目-->确定，进入了“我的项目” 界面，选择“Symbol” ,点击“下载至本地”，

3，解压下载的压缩包，在此目录中新建一个html文件进行使用，内容如下就可以显示出图标了：

<!DOCTYPE html>
<html>
<head>
   <!--引入下载的iconfont.css-->
  <link rel="stylesheet" href="iconfont.css">
</head>
<body>
 图标你好<span class="iconfont icon-zelvxuanzefeiyongdaosanjiaoxingfandui"></span>  <br/>
 <i class="iconfont icon-youjiantou" style="font-size:30px;color:red;"></i>
</body>

</html>

html中只需要引入iconfont.css 即可，

标签用<span> 或者<i> 都可以，其class 固定为 iconfont 并加上对应图标的名称即可，名称可在iconfont.css中查看，如下我只添加了两个图标，这里就有两个图标（16行和20行）：