在ElementUI项目中集成iconfont图标库

在前端项目开发中经常会遇到使用的组件库提供的ICON图标不够用的情况。最常见的解决方案无非就是把设计图的图标切图引入到项目中。还有就是使用svg图标,封装一个渲染组件在项目里面直接引入这个组件。

本文将介绍另一种方法,即集成iconfont图标库的图标到项目中去,用最小化的改动满足图标需求。

快速开始

1、打开阿里巴巴的图标库网站:阿里巴巴矢量图标库,登录自己的账号。

完成这一步你会看到这样的界面。

2、搜索你需要的图标,然后选中你需要的图标,点击添加购物车,步骤如下图所示:

3、点击菜单栏购物车之后,弹出下面的页面,点击添加至项目。在弹出的侧栏里面选择要把图标添加到的项目,如果没有项目就新建。

4、把图标加入到指定的项目后,点击确定你就会跳转到项目详情页面,在这个页面点击项目设置,对图标前缀和字体名称做一些简单的设置,如下图。

修改完成后,点击保存。

5、下载图标文件到本地

  • iconfont.ttf、iconfont.woff、iconfong.woff2 是图标字体文件,可以把它们复制到你的项目中的 fonts 目录下。

  • iconfont.css 是 Font Class 方式使用图标的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 使用我们刚刚添加到项目中的图标了。

复制代码
<i class="el-icon-xitong"></i>

总结

本文试图提供一种方便快捷的方法,帮助开发人员将iconfont图标集成到他们的前端项目中,满足项目对图标的需求。介绍了阿里巴巴图标库网站的使用方式,以及如何对图标项目进行设置,让这些图标可以直接在element-ui项目中应用。

在现在的项目中main.js引入字体图标的css样式

7、在组件当中就可以使用。使用之前要加iconfont。

相关推荐
大西瓜瓜瓜9 小时前
PS2020,将所有图片不剪切,调整为800×800像素的文档尺寸。
前端
sjin9 小时前
React源码 - 大名鼎鼎的Fiber
前端
子兮曰9 小时前
🚀从单体到Monorepo:四川省xxx协会官网架构重生记
前端·next.js·turbopack
bosscheng9 小时前
0到1理解web音视频从采集到传输到播放系列之《Jessibuca系列篇音视频解封装》
javascript·音视频开发
白水清风9 小时前
CI/CD学习记录(基于GitLab)
前端·自动化运维·前端工程化
齐杰拉9 小时前
源码精读:拆解 ChatGPT 打字机效果背后的数据流水线
前端·chatgpt
文心快码BaiduComate10 小时前
“一人即团队”——一句话驱动智能体团队
前端·后端·程序员
我是ed10 小时前
# vue3 实现前端生成水印效果
前端
恶猫10 小时前
javascript文本长度检测与自动截取,用于标题长度检测
javascript·css·css3·js·自动检测·文本长度
IAtlantiscsdn10 小时前
Redis7底层数据结构解析
前端·数据结构·bootstrap