前言
在前端项目开发中经常会遇到使用的组件库提供的ICON图标不够用的情况。最常见的解决方案无非就是把设计图的图标切图引入到项目中。还有就是使用svg图标,封装一个渲染组件在项目里面直接引入这个组件。
本文将介绍另一种方法,即集成iconfont图标库的图标到项目中去,用最小化的改动满足图标需求。
快速开始
1、打开阿里巴巴的图标库网站:www.iconfont.cn/collections...,登录自己的账号。
完成这一步你会看到这样的界面。
![](https://file.jishuzhan.net/article/1764860186251497473/866eee299a98e6f15223cdde717f9c8e.webp)
2、搜索你需要的图标,然后选中你需要的图标,点击添加购物车,步骤如下图所示:
![](https://file.jishuzhan.net/article/1764860186251497473/5c122c60f04d0ef78a468e7bf33b6811.webp)
3、点击菜单栏购物车之后,弹出下面的页面,点击添加至项目。在弹出的侧栏里面选择要把图标添加到的项目,如果没有项目就新建。
![](https://file.jishuzhan.net/article/1764860186251497473/91de9ed4ff1ad820be312e2e2671e29c.webp)
![](https://file.jishuzhan.net/article/1764860186251497473/7d236c7e4576e602427791934e255512.webp)
4、把图标加入到指定的项目后,点击确定你就会跳转到项目详情页面,在这个页面点击项目设置,对图标前缀和字体名称做一些简单的设置,如下图。
![](https://file.jishuzhan.net/article/1764860186251497473/cf1d7d1a53245df533d64eb25a63f34d.webp)
- 将
FontClass/Symbol
前缀修改为el-icon-
- 将
Font Family
是element-icons
![](https://file.jishuzhan.net/article/1764860186251497473/7bc9edd3b364709e4ce447f67cb5928e.webp)
修改完成后,点击保存。
5、下载图标文件到本地
![](https://file.jishuzhan.net/article/1764860186251497473/ad3c6d0dcb7e986dbb035945e5b40f20.webp)
解压后下载包内容如下图所示
![](https://file.jishuzhan.net/article/1764860186251497473/3555c2f04e79f90d0fdeda60fdb3223f.webp)
- iconfont.ttf、iconfont.woff、iconfong.woff2 是图标字体文件,可以把它们复制到你的项目中的
fonts
目录下。 - iconfont.css 是
Font Class
方式使用图标的CSS代码,内容如下,但是记得修改图标字体文件的路径
css
@font-face {
font-family: "element-icons";
src: url('iconfont.woff2?t=1709537603593') format('woff2'),
url('iconfont.woff?t=1709537603593') format('woff'),
url('iconfont.ttf?t=1709537603593') format('truetype');
}
.element-icons {
font-family: "element-icons" !important;
font-size: 18px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.el-icon-xitong:before {
content: "\e67c";
}
6、把 iconfont.css 引入到项目中,在需要的地方就可以使用类名 el-icon-xitong
使用我们刚刚添加到项目中的图标了。
html
<i class="el-icon-xitong"></i>
总结
本文试图提供一种方便快捷的方法,帮助开发人员将iconfont图标集成到他们的前端项目中,满足项目对图标的需求。介绍了阿里巴巴图标库网站的使用方式,以及如何对图标项目进行设置,让这些图标可以直接在element-ui项目中应用。
不尽之处,欢迎评论区交流。