element-ui 使用阿里iconfont图标

最新推荐文章于 2024-05-08 16:51:28 发布
最新推荐文章于 2024-05-08 16:51:28 发布
阅读量485 收藏
点赞数 1
分类专栏： 前端 webpack学习 随记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mobin518/article/details/87856778
版权

一、在阿里图标 创建项目 注意 前缀不要与element-icon的前缀相同

 

二、将创建的项目 下载到本地

三、将文件复制到项目中

 

 

四、在main.js中导入css样式

 

五、使用图标 

在输入框的内部使用 

六、效果 

 

 

mobin518
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue element-ui项目icon有限，引入阿里矢量图标库icon图标并使用
weixin_43829905的博客
12-30 484
vue element-ui项目icon有限，引入阿里矢量图标库icon图标并使用 1.登录阿里矢量图标库https://www.iconfont.cn 2.选择自己需要的icon图标，如果icon是自己需要的，但是颜色不是自己所需的，先不要慌，直接加入购物车先 3.选完后点击右上角的购物车图标，会看到购物车内的所有icon 4.点击“添加至项目”（选择已创建的项目或者新建） 5.可以添加到已有的项目或自己新建的项目（这里演示新建的项目）。填写项目名称 6.完成后可以在项目内看到刚添加的icon，而
阿里小图标用以替代element-ui图标
08-10
使用阿里图标库，我们可以为Vue项目中的Element-UI组件添加更多样化、风格独特的图标，提升用户体验。 首先，你需要在阿里图标库官网（http://iconfont.cn/）注册账号并创建自己的项目。在项目中，你可以通过搜索...
在vue框架下element-ui两种引用阿里云图标库的方法
weixin_69556696的博客
04-24 1252
2.打开链接后复制代码，在刚才放src/accent文件夹下创建css文件放入复制的代码然后在main.js文件中声明。下载解压放入src的文件中， 要在main.js文件中声明引入压缩包中的iconfont.css文件。第一种方法是下载到本地或者自己的服务器稳一点，但是如果要更新要再次下载，重新引入。第二种方法是使用在线连接，更新只要在阿里云更新一下代码再次拉入css文件就可以。可以看到第一步是引入css文件，我们在main.js文件中已经引用。类名和一个特有的类名和自己的设置有关。
vue+element-ui项目内使用阿里图标库
DOM曼珠沙华的博客
06-11 2339
项目内可能会经常涉及到图标使用的问题，我比较常用的是阿里的图标库。 要使用图标的话，需要先对图标进行下载，下面是下载图标库及使用的步骤： 获取图标 1.需要进入到阿里图标矢量库官网，点击我的项目：
VUE element-ui之使用外部图标---iconfont篇_如何用除elementui以外的图标
最新发布
2401_84616292的博客
05-08 440
技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。3.图标库建好后直接搜索自己需要的图标按如下步骤：4、将文件解压后，在项目assets下新建文件，将解压文件放入。
iconfont自定义添加element图标
pp
12-25 1740
自定义添加element图标 iconfont生成element图标 1.找到图片添加到项目 2.设置图片类名信息 3.下载文件到本地 4.将文件添加到项目 5. 使用 main.js 引入css：import ‘./common/style/font/iconfont.css’ //相对路径 6. 添加iconfont类名和图标类名即可 <i :class="el-icon-up1 i...
在Vue+Element ui 项目中如何使用iconfont（阿里图标库）中的图标
weixin_43181470的博客
12-27 872
在项目过程中，element ui 中自带的图标往往满足不了自己的需求，那么如何在项目中使用iconfont的图标呢？在项目中src文件夹下，新建iconfont文件夹，将上面拿到的压缩包的文件复制到iconfont里面。找到自己想要的图标，加入购物车，加入完成后点击购物车，把图标添加至项目。6. 然后根据iconfont.css中的内容，去引入对应的图标。找到项目的main.js文件，引入iconfont.css样式。压缩包里有些文件是没有用的，比如demo的文件可以直接删除。
Vue中使用ElementUI使用第三方图标库iconfont的示例
10-17
主要介绍了Vue中使用ElementUI使用第三方图标库iconfont的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue element项目引入icon图标的方法
08-27
然而，Element UI 的图标库有限，无法满足开发者的需求。因此，引入第三方图标库成了必然的选择。 阿里巴巴图标库 阿里巴巴图标库是中国最大的图标库，提供了丰富的图标资源。开发者可以注册阿里巴巴账号，搜索...
Vue使用阿里图标库
12-16
阿里图标库（Iconfont）提供了丰富的图标资源，能够方便地与各种UI框架结合使用，包括vue-cli3、Element UI和Vant等。以下是如何在Vue项目中使用阿里图标库的详细步骤。 **一、创建Vue项目** 如果你还没有Vue项目，...
vue项目引入Iconfont图标库的教程图解
10-17
在Vue项目中，引入Iconfont图标库是一种常见的实践，特别是在Element UI等前端框架无法满足所有图标需求时。本文将详细讲解如何将Iconfont图标库整合到Vue项目中，以实现自定义图标的需求。 首先，你需要访问阿里...
Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
热门推荐
棋鬼王的博客
03-29 7万+
我们使用element-ui、vue开发网站的时候，往往图标是起着很重要的作用。 2018-11-9更新 1.傻瓜式引用：由于这种方法及其简单 省去了很多繁琐的步骤， a.引入项目生成的，图标地址。 b.使用推荐使用这种，详情请看文档！！文档够详细的了。http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4...
在element-ui中使用iconfont
weixin_66157105的博客
05-12 504
iconfont下载到本地使用
在element-template引入从阿里巴巴图标库下载的icon后无法渲染颜色的问题
爱学习的大雄的博客
02-24 368
如下图所示，element-admin中引入的阿里巴巴的图标库的icon可以在系统中去控制他的颜色，但是不知道为什么我从阿里巴巴图标库中下载下来的icon有些可以改变颜色有些不能改变颜色，于是我就开始在网络上寻找资料。这个问题在我第一次使用element-template进行开发的时候并没有发现，是在写毕设的过程中发现的该问题。本来没打算记录该问题，但是今天又遇到了这个问题，然后我又有点忘记是怎么解决的了，故做记录方便查询。，就是这个参数导致了我们在系统中无法进行渲染，只能使用他固定的颜色。
vue+element使用阿里的图标库保存图标
qq_57420582的博客
09-11 965
小白入门element阿里的图标库
element-ui使用阿里矢量图标
业余前端的职业经历
01-01 4390
其实我们在工作中，很多时候ui给我们的图标可能就是从阿里图标库中拿来的 如果你用elemnt-ui写项目的时候 如果要用到很多图标 <el-button type="primary" icon="el-icon-search">搜索</el-button> <i class="el-icon-edit"></i> <i class...
Vue中使用ElementUI使用第三方图标库iconfont
无双孟堂的博客
09-07 4万+
1.在http://www.iconfont.cn/阿里巴巴图标库添加图标到自己项目中，然后点击更多项目中的编辑项目 2.修改前缀为el-icon-xxx，xxx自定义然后，将项目下载自本地 3.将这5个文件放入到项目文件中，将iconfont.css引入到Vue项目中， 然后修改iconfont.css的.iconfont处，将其修改为下图所示 4.修改iconf
vue中 使用element-ui 图标和阿里字体图标结合使用
AdleyTales的技术博客
12-13 4951
1 登录阿里字体图标官网 2 图标管理 --&gt; 我的项目 --&gt; 创建一个项目 3 开始搜有想要的图标添加到我的项目中 4 下载到本地 5 解压，拷贝到src/asserts/icon下 . ├── demo.css ├── demo_fontclass.html ├── demo_symbol.html ├── demo_unicode.html ├── iconfont.cs...
7.在vue中使用element-ui组件、图标和阿里图标库
qq_39055970的博客
06-30 1542
在vue中使用element-ui组件和阿里图标库1.下载element-ui到项目中2.参照element-ui官网插入组件3.在组件中插入图标3.1插入element-ui图标3.2插入阿里图标 1.下载element-ui到项目中 项目中已经下载，注意按需导入，这样项目会比较小。 2.参照element-ui官网插入组件 打开element-ui官网，找到对应的组件代码，复制到项目中 但是因为element-ui插件之前是选择按需导入，虽然性能会更好，但是需要在plugins->element
element-ui使用
10-01
element-ui是一个基于Vue.js的后台组件库，由饿了么前端团队开发。它提供了一系列的组件和样式，可以帮助程序员快速进行页面布局和构建。在使用element-ui之前，需要先导入组件库和组件相关的样式，然后通过Vue.use方法将element-ui安装到Vue上。 以下是element-ui的使用示例： 1. 安装element-ui 可以通过npm或yarn来安装element-ui： ``` npm install element-ui --save ``` 或 ``` yarn add element-ui ``` 2. 导入组件库和样式 在工程的入口文件（通常是main.js）中导入element-ui组件库和相关样式： ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 使用element-ui组件 在需要使用element-ui组件的地方，可以直接在代码中使用相应的组件，例如在App.vue中使用select选择器： ```html <template> <div> <el-select v-model="selectedOption" placeholder="请选择"> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option> </el-select> </div> </template> <script> export default { data() { return { selectedOption: '', options: [ { value: 'option1', label: '选项1' }, { value: 'option2', label: '选项2' }, { value: 'option3', label: '选项3' } ] } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值