Element引入iconfont图标

已于 2023-02-27 17:08:48 修改
阅读量231 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： vue.js 文章标签： vue.js
于 2023-02-22 16:00:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hudingqiang/article/details/129164425
将iconfont下载的字体图标文件放入项目的assets目录下，并在main.js中引入iconfont.css文件。然后在页面中通过类名iconfonticon-test来使用图标。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  • iconfont项目设置

 

  • 下载的文件放到assets目录

  • main.js 增加 import '@/assets/iconfont/iconfont.css'

  • 页面中使用 'iconfont icon-test'

Vue引入使用iconfont字体图标
m0_51431448的博客
08-08 1029
由于element-ui或element-plus提供的图标有时候并不能满足日常需求，所以这篇介绍一下前端引入阿里巴巴矢量图标库使用，其实不止vue哈，html也是同样的道理。
vue/cli ,element 引入第三方图标
qq_37377082的博客
12-30 254
访问第三方图标网站 推荐 ：阿里巴巴矢量图标库（ https://www.iconfont.cn/ ） 这里使用的也是阿里巴巴矢量图标图 创建 图标库网站账户并登录 这里账户已经创建，并登录成功 在图标库网站内创建项目 在图标库搜索图标，添加到购物车 把购物图标添加到项目，并下载 解压下载文件，并拷贝到项目里 修改iconfont.css 添加的内容 .iconfont { font-family: "iconfont" !important; font-size: 16p
如何在前端项目中单独引入 ElementUI 图标以及使用
都随它大小便吧
01-18 9890
首先 element-ui 图标是基于字体文件的的形式实现的，如woff和ttf等。有时候一些需求用CSS的before和after为元素实现，自然用到 content 属性，而这个content不仅仅可以承载空格，还可以承载字符编码的。
element 如何使用自定义icon图标
m0_61702149的博客
07-06 2万+
element 替换自己的小图标，自定义小图标
Element UI中的图标
taibaishenlong的专栏
11-09 2万+
1、vue是现今比较流行的前端框架了，目前，使用比较多的就是Element UI，为了页面的美观程度，我们每个前端页面大多都会使用一下图标，下面介绍一下图标的使用。如有需要，可参考官网: 2、举个简单的例子，我们编写一个input框，在框后端添加一个搜索的图标，代码如下所示： <el-form :inline="true"> <el-form-item label="城 市 :"> <el-input type="t
Element-Plus搭建CMS页面结构 引入第三方图标库iconfont（详细）
weixin_47906106的博客
07-13 2576
element plus组件库是由饿了么前端团队专门针对vue框架开发的组件库，专门用于电脑端网页的。因为里面集成了很多组件，所以使用他可以非常快速的帮我们实现网站的开发。因为图标需要在整个项目的任意地方使用，可以在public/index.html 中加载。注意：class=“iconfont” 是固定写法 后面跟那边复制的代码。如果elementui中的图标没有你想要的可以使用其它第三方的。引入的时候也是分成两种，一种是全部引入，一种是按需引入。在需要使用的地方引入。
vue项目引入Iconfont图标库的教程图解
10-17
在Vue项目中，引入Iconfont图标库是一种常见的实践，特别是在Element UI等前端框架无法满足所有图标需求时。本文将详细讲解如何将Iconfont图标库整合到Vue项目中，以实现自定义图标的需求。 首先，你需要访问阿里...
vue element项目引入icon图标的方法
08-27
Vue Element 项目引入 Icon 图标的方法 本文主要介绍了在 Vue Element 项目中引入 Icon 图标的方法，旨在帮助开发者快速和高效地引入 Icon 图标，以提高用户体验和降低页面加载速度。 引入 Icon 图标的必要性 在 ...
Vue Element项目引入阿里Iconfont图标的步骤详解
在Vue Element项目中引入第三方图标库以增加自定义图标选择并优化用户体验是一个常见的需求。当Element UI提供的图标不足以满足项目需求时，可以借助阿里巴巴图标库来扩充图标资源。以下是详细的步骤： 1. **账号...
ElementUI引入自定义图标
ylnzzl的博客
09-25 2606
目录 步骤说明 新建项目 添加图标 项目设置 文件引入 使用技巧 步骤说明 新建项目 在iconfont网站的”资源管理->我的项目“页面里新建项目,注意”FontClass/Symbol前缀“选项填写el-icon-，"Font Family选项"填写element-icons。 添加图标 搜索要用到的图标点击加入购物车【建议选择的图标名称是纯英文名】，图标添加完后，在购物车面板里选择“添加进项目”。 项目设置 在”资源管理->我的项目“页面里点击”项目设置“
VUE element-ui中el-button使用iconfont图标
hhb442的博客
06-27 4131
注意：这里icon-font将图标作为文字格式处理，即修改字体大小样式，icon随之改变。4、将文件解压后，在项目assets下新建文件，将解压文件放入。1、进入iconfont官网。可以看到和其他相同的效果；可以看到字体样式太大。并使用任意方式登录。
element-plus el-button 自定义添加icon的方法
qq_43478653的博客
11-16 3148
不知道为什么设置一个icon，要这么麻烦。我使用的是。
本地引入elementUI图标使用
weixin_50930483的博客
08-17 3732
本地引入elementUI图标使用（不使用vue脚手架）
Element-Ui组件（二）Icon 图标
热门推荐
究极死胖兽的博客
06-03 26万+
Element-Ui组件（二）图标应用 本文参考Element官方文档： http://element-cn.eleme.io/#/zh-CN/component 基本用法 Element内置丰富的图标库，主要有以下2种用法： 设置类名el-icon-xxx，通常使用i元素 在Element部分组件中设置icon属性 页面效果 以下是通过上述两种用法制作的简单导航工具条： 示例代码 &l...
ElementUI使用问题记录：设置路由+iconfont图标+自定义表单验证
weixin_52104995的博客
04-08 996
验证手机号（我是独立写了一个validator.js文件的，放在util目录下，然后把所有验证规则都写在这里，使用的时候导入即可）/*** 校验规则文件* 触发方式：type=['blur','change']*///定义phone验证全局变量if (!value){callback(new Error('请输入电话号码'))}else if (!callback(new Error('请输入正确的11位手机号码'))}else {callback()required:{
element ui表单邮箱和密码验证
最新发布
u011857538的博客
06-07 2601
element表单验证邮箱、验证码密码
在Vue+Element ui 项目中如何使用iconfont（阿里图标库）中的图标
weixin_43181470的博客
12-27 976
在项目过程中，element ui 中自带的图标往往满足不了自己的需求，那么如何在项目中使用iconfont的图标呢？在项目中src文件夹下，新建iconfont文件夹，将上面拿到的压缩包的文件复制到iconfont里面。找到自己想要的图标，加入购物车，加入完成后点击购物车，把图标添加至项目。6. 然后根据iconfont.css中的内容，去引入对应的图标。找到项目的main.js文件，引入iconfont.css样式。压缩包里有些文件是没有用的，比如demo的文件可以直接删除。
VUE element-ui之使用外部图标---iconfont篇_如何用除elementui以外的图标
2401_84616292的博客
05-08 814
技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。3.图标库建好后直接搜索自己需要的图标按如下步骤：4、将文件解压后，在项目assets下新建文件，将解压文件放入。
element导入，js导入
lujingjing567的博客
11-20 3112
因为在公司项目中有很多导入，图片导入，文件导入，写两个常用的留在这里 vue element upload &lt;el-upload @click="test($event)" class="upload-demo uploadArr" list-type="picture-card" :action="imp...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值