element-ui中怎样使用iconfont的图标

最新推荐文章于 2024-05-08 16:51:28 发布
最新推荐文章于 2024-05-08 16:51:28 发布
阅读量314 收藏
点赞数
分类专栏： 前端 文章标签： vue elementui iconfont vscode 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39357332/article/details/134501986
版权

1 登录

https://www.iconfont.cn/

2 搜索合适的图

在这里插入图片描述
在这里插入图片描述这里可以找到这个图所在的图库。这样就可以一次查找到对应的所有同款图标

3 选择同款加入购物车

在这里插入图片描述

4 将购物车的icon加入项目，注意是新建项目，除非你是确定需要前面已经加过的icon

在这里插入图片描述在这里插入图片描述

5 下载icon

在这里插入图片描述选择font-class 点击下载。其他方式还没用过…

6 导入vscode的vue项目

在这里插入图片描述在这里插入图片描述
我是简单粗暴都copy过去了，只copy css文件似乎有点问题

在这里插入图片描述copy文件 加 配置main.js 配置引入部分就结束了

7 使用

在这里插入图片描述此处是配合elment-ui使用，其他方式应该都是类似的

谢谢浏览，欢迎指正！

想想都开心
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element 如何使用自定义icon图标
m0_67391401的博客
08-01 3057
写项目时，发现element里的图标没有我需要的图标，两种情况①简单的替换小图标，没有选中变色等要求②有选中变色等要求，稍微复杂的需求。
Vue中使用ElementUI使用第三方图标库iconfont的示例
10-17
主要介绍了Vue中使用ElementUI使用第三方图标库iconfont的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在使用Elment-UI的Vue项目中使用iconfont上的第三方图标
weixin_40398599的博客
11-27 365
在使用Element-UI的Vue项目中，Element-UI自带的图标数量比较少，往往不能满足项目需要，这时候需要引入第三方图标，比如常用的。
如何在Vue+ElementUI项目中使用iconfont图标库
weixin_46073538的博客
10-24 5632
iconfont官网iconfont中有许多样式的图标可以给我们使用。什么是SVG格式？SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。
VUE element-ui之使用外部图标---iconfont篇_如何用除elementui以外的图标
最新发布
2401_84616292的博客
05-08 397
技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。3.图标库建好后直接搜索自己需要的图标按如下步骤：4、将文件解压后，在项目assets下新建文件，将解压文件放入。
element ui 使用 iconfont
m0_37859502的博客
02-04 2045
由于elelmentui自带的icon太少了。所以今天写一个elementui如何使用阿里的iconfont的教程。 首先你需要注册一个iconfont账号 iconfont地址 注册之后点击我的项目 点击添加新增一个项目 随便选择一个图标，点击加入购物车 点击购物车按钮 点击添加到项目 选择之前创建的项目 进入我的项目拷贝css在线地址 在vue项目的index.html添加 <!DOCTYPE html> <html lang="en"> <he.
在element-ui中使用iconfont
weixin_66157105的博客
05-12 500
iconfont下载到本地使用
使用elementui组件，iconfont图标
我的博客
06-16 436
FontClass/Symbol前缀：elementui组件中自带的icon 都是el-icon-开头，避开这个名字就行 font Familiy：这个是icon的类名
阿里小图标用以替代element-ui图标
08-10
使用阿里图标库，我们可以为Vue项目中的Element-UI组件添加更多样化、风格独特的图标，提升用户体验。 首先，你需要在阿里图标库官网（http://iconfont.cn/）注册账号并创建自己的项目。在项目中，你可以通过搜索...
element-ui 的el-button组件中添加自定义颜色和图标的实现方法.docx
01-13
然后，我们可以在指令中使用这些对象来实现自定义的颜色和图标。 例如，我们可以在指令中编写以下代码： otherRender: { update(el, binding) { const type = binding.value const color = colorMap[type] ...
nuxtblog:用NuxtJs +VueJs(element-ui)+ NodeJs(express)+mongodb来搭建个人博客
04-29
基于NUXTJS 的个人博客项目说明本项目是使用nuxtjs+vuejs(element-ui)+nodejs(express)进行开发的个人博客nuxtadmin(后台管理系统)基于element-ui的后台管理界面搭建分类管理子分类管理文章管理富文本编辑器图片上传...
vue_element-ui:基于vue+elementui开发的后台基础模板
05-16
vue-cms A Vue.js project ...在iconfont官网把图标添加进库，然后下载代码，把iconfont.css 和字体文件拷贝到项目中，然后全局引用iconfont.css For a detailed explanation on how things work, check out the
实战element 的rate使用iconfont图标
weixin_45634433的博客
07-22 606
问题背景 在项目开发过程中需要使用到一个评分的功能,项目使用的element 的框架,所以首选肯定就是自带的rate的组件,但是在rate的介绍中默认的一般都是星星的icon,自定义的icon 也都是直接框架自带的icon的所有的图标,但是都不满足自己的需求,这是发现rate可以支持使用iconfont 的图标,但是按照框架中的介绍使用并没有实现,在查了资料之后发现还是有一些注意点的,这里记录一下方便日后的学习. iconfont的使用这里就不过多的介绍了,只需要将自己需要的图标实现一下的步骤即可,这时候编
Element UI中全部的图标以及组件
马志武的博客
02-20 1018
Element UI中全部的图标以及组件。
vue element自定义图标-iconfont图标的使用
fatfish517的博客
03-28 4889
vue element自定义图标-iconfont图标的使用 阿里图标的使用
ElementUI：项目中引入自己的ICON
2401_83817971的博客
03-29 1261
二、 点击右上角购物车三、 将图标添加至项目四、 点击右上角更多操作中的编辑项目五、 修改前缀，与ElementUI自带的前缀相同el-icon-六、 下载到本地七、 将需要的文件引入到项目中八、 修改iconfont.css，注意class与font-family要与自己的对应important;/* 以下内容参照第三方图标库本身的规则 */
Vue3+ElementPlus项目使用iconfont阿里图标
qq_45438471的博客
09-11 3296
回顾一下上篇文章的内容，Element UI 使用的是阿里巴巴的图标库，通过字体图标的用法（即使用 el-icon-xxx 的类名）来引入图标。。而Element Plus 抛弃了字体图标的用法，而直接使用了 svg 图标。   那么在Element Plus框架内使用阿里图标又该如何实现？本篇文章就是讲述Vue3+ElementPlus项目使用iconfont阿里图标的方法。
Vue项目中使用element-ui，并引入第三方图标库iconfont
热门推荐
sleepwalker_1992的专栏
09-23 2万+
element-ui官网 1、安装 npm install element-ui --save-dev 2、在main.js文件中引入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 3、上面两步完成后，就可以在项目任意的组件中...
如何像element ui源码中添加字体图标
07-20
要像 Element UI 源码中添加字体图标，你需要按照以下步骤进行操作： 1. 准备字体图标文件：首先，你需要准备一个包含所需字体图标的字体文件，常见的格式有 .ttf、.woff、.woff2 等。你可以从图标库中下载字体图标文件，例如 Font Awesome 或 Iconfont。 2. 导入字体文件：将字体文件导入 Element UI 的源码中。你可以将字体文件放在 Element UI 项目的某个合适的目录下，例如 `src/assets/fonts`。 3. 修改样式文件：打开 Element UI 的样式文件（一般是 `src/packages/theme-chalk/src/index.scss`），在文件的开头处添加以下代码： ```scss @font-face { font-family: 'your-icon-font'; // 可以自定义字体名称 src: url('./assets/fonts/your-icon-font.ttf') format('truetype'); // 根据实际路径修改 // 其他字体格式的引入方式 } ``` 4. 使用字体图标：在 Element UI 的组件中使用字体图标。你可以在需要使用图标的地方，通过 `el-icon` 类来引用字体图标。例如： ```html <el-button> <i class="el-icon your-icon"></i> </el-button> ``` 这样，你就可以在 Element UI 中使用自定义的字体图标了。记得根据实际情况修改字体文件和样式文件的路径。希望对你有所帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值