html引入Iconfont的方法

最新推荐文章于 2024-04-23 22:33:39 发布

＊大脸猫Katee

最新推荐文章于 2024-04-23 22:33:39 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/weixin_43796496/article/details/96741212

笔记专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何通过阿里妈妈旗下的Iconfont网站寻找图标，并将其集成到项目中。具体步骤包括选择图标、添加到购物车、下载代码包、解压并引入到CSS文件中。通过这种方式可以轻松地将所需的图标应用到网页设计中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.寻找图标
可以在阿里妈妈旗下的网站官方网址：http://www.iconfont.cn/ 找到需要的icon
2.点击购物车添加到库
3.下载代码并进行解压
4.引入Iconfont

//base.css
/*自定义字体*/
@font-face {
    font-family: 'wjs';
    src: url('../fonts/MiFie-Web-Font.eot'); /* IE9*/
    src: url('../fonts/MiFie-Web-Font.eot') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/MiFie-Web-Font.woff') format('woff'), /* chrome、firefox */
    url('../fonts/MiFie-Web-Font.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../fonts/MiFie-Web-Font.svg') format('svg'); /* iOS 4.1- */
}
/*自定义字体使用样式*/
.wjs_icon{
    font-family: wjs;
}

/*手机图标对应的编码*/
.wjs_icon_phone::before{
    content: "\e908";
}
/*电话图标对应的编码*/
.wjs_icon_tel::before{
    content: "\e909";
    font-size: 14px;
}