elementui 引入 iconfont 图标

本文链接： https://blog.csdn.net/qq_34802010/article/details/81451278

首先进入官网http://www.iconfont.cn/

选择图标库

在里面选择你喜欢的图标，加入购物车（右上角），然后点击购物车添加至项目下载到本地【网上这部分教程太多，而且官网界面简单也很好理解。】

将下载下来的压缩包解压到本地。绿色箭头的不需要，只需要红色和黄色方框内的。

找到Vue项目路径，在assets路径下新建文件夹Iconfont，将文件复制粘贴到项目里【命名看个人】

修改main.js: import './assets/Iconfont/css/iconfont.css'(注意路径问题)【自行改为自己的iconfont.css路径】

修改文件路径：这四个文件都是绝对路径需要修改。

在iconfont.css里修改路径！注意iconfont.woff我下载的iconfont.css中

最开始是上图，因此无法添加我想要的相对路径，网上有些图片是url(iconfont.woffXXXX）←这种样子的，可以直接设置相对路径，所以我直接将woff文件与CSS放在一起，这样是可以的。

改后的路径如上图↑

之后就可以直接调用了

类似这样：<i class="iconfont icon-mobilephone"></i>

调用的图标可以在iconfont.css 中找到写法（如：icon-mobilephone 或者icon-edit等）

PS：如果遇到下图的问题：

解决方法：npm install css-loader --save

elementui 引入 iconfont 图标相关推荐

vantUI 自定义引入iconfont图标（3种风格）- 案例篇
文章目录 vantUI 自定义引入iconfont图标(3种方法:含案例截图) 效果图 · 对比: 重要代码`(3种代码格式)`: 全局引入 · 代码: 项目文档 · 目录结构本地document文 ...
如何在uni-app中引入iconfont图标
如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的 ...
Webpack项目中引入IconFont图标
本篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标. IconFont官网:https://www.iconfont.cn/ 1.打开IconFont官网并登陆自己的账户. ...
微信小程序如何正确引入iconfont图标
最近在微信小程序踩坑啦,开始愉快了像web项目一样引入iconfont图标,结果发现: 然后?? 对,这个讨厌的小方块,显示失败啦最好一番百度后,成功解决啦,哈哈哈因为,小程序必须先转为base6 ...
Flutter引入iconfont图标，并自动生成dart图标文件
Flutter引入iconfont图标并自动生成dart图标文件下载iconfont文件 flutter 项目 pubspec.yaml文件中配置自动转换脚本下载iconfont文件将icon ...
VUE如何引入iconfont图标来使用
对做前端界面的开发者来说,做各类界面的时候需要用到图标,这里说下如何在VUE中引用iconfont图标来使用,以引入阿里的iconfont图标为例. 一.首先访问https://www.iconfon ...
vue element-ui引入第三方图标在线版
参考链接:Vue Element-UI使用icon图标(第三方)–在线版 - 简书 vue项目版本为vue3 打开iconfont-阿里巴巴矢量图标库,注册登录之后回到首页在首页顶部菜单图标管理& ...
ElementUI引入自定义图标
目录步骤说明新建项目添加图标项目设置文件引入使用技巧步骤说明新建项目在iconfont网站的"资源管理->我的项目"页面里新建项目,注意"Font ...
vue element-ui引入第三方图标
参考链接Vue Element使用icon图标(第三方) - 简书项目vue版本为vue3,按照上文重新整理的笔记打开iconfont-阿里巴巴矢量图标库,注册登录之后回到首页在首页顶部菜单图 ...

elementui 引入 iconfont 图标

elementui 引入 iconfont 图标相关推荐

最新文章

热门文章