在ElementUI项目中集成iconfont图标库

前言

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

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

快速开始

1、打开阿里巴巴的图标库网站:www.iconfont.cn/collections...,登录自己的账号。

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

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

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

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

  1. FontClass/Symbol 前缀修改为 el-icon-
  2. Font Familyelement-icons

修改完成后,点击保存。

5、下载图标文件到本地

解压后下载包内容如下图所示

  1. iconfont.ttf、iconfont.woff、iconfong.woff2 是图标字体文件,可以把它们复制到你的项目中的 fonts 目录下。
  2. 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项目中应用。

不尽之处,欢迎评论区交流。

相关推荐
IT瘾君1 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库2 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端2 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED2 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪3 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程3 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常3 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
小杨升级打怪中3 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木3 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师4 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt