阅读 79

CSS怎么在项目里引入自定义字体图标(@font-face)

前言

推荐到下面2个免费好用的字体图标网站,下面以阿里巴巴矢量图标库举例说明

1.

2.

 

步骤

1. 登录官网后,搜索要下载的图标,鼠标指向该图标后如下图所示,点击加入购物车图标

 

2. 然后点击右上角的购物车图标后如下图所示,选择下载代码

 

 

3. 解压下载代码后打开文件夹,把红色框中后缀为.ttf,woff,woff2的文件放入你项目中的font文件夹,

红色圈的iconfont.css放入你项目中的css文件夹

 

4. 在项目中引入iconfont.css

 在页面中如下图使用字体图标对应class即可

 

如果按照上述步骤依然无法显示字体图标,看看iconfont.css中红色框部分路径是否改为了你项目的路径

改之前:

 改之后:

 

我之前还写了一篇的文章,有需要的朋友可以看看!

 

原文:https://www.cnblogs.com/tu-0718/p/14846470.html

文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐