Vue项目Element-UI中使用阿里字体图标库

最新推荐文章于 2024-02-29 18:36:33 发布
最新推荐文章于 2024-02-29 18:36:33 发布
阅读量950 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Liang_Shun/article/details/105837344
本文介绍了如何在Vue项目中使用Element-UI并集成阿里字体图标库。首先下载字体图标压缩包，然后将其解压并放入项目src/assets目录。接着在main.js中引入iconfont.css，最后在组件中通过修改类名为"iconfont icon-xxx"来使用字体图标。

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

第一步：下载字体图标
选择好要下载的字体图标后 点击下载代码，得到一个压缩包
在这里插入图片描述
第二步
解压后将文件夹放到项目src/assets中
在这里插入图片描述

第三步
打开解压后的文件夹中的demo——index.html
可选fontclass引用
在这里插入图片描述

在项目入口文件main.js中导入字体图标 iconfont.css

// 导入字体图标
import './assets/fonts/iconfont.css'

在这里插入图片描述
最后在需要使用字体图标的单文件组件中使用。
例
login.vue单文件组件使用下图的字体图标

最低0.47元/天 解锁文章

200万优质内容无限畅学
Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
棋鬼王的博客
03-29 8万+
我们使用element-ui、vue开发网站的时候，往往图标是起着很重要的作用。 2018-11-9更新 1.傻瓜式引用：由于这种方法及其简单 省去了很多繁琐的步骤， a.引入项目生成的，图标地址。 b.使用推荐使用这种，详情请看文档！！文档够详细的了。http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4...
vue+element-ui项目引入第三方图标库：阿里巴巴矢量图标库（问题：小方框）
绝圣弃智-零的博客
04-23 6183
因为element-ui内置的小图标非常有限，所以有时候，我们需要自定义或引入第三方图标库。 先介绍下阿里巴巴矢量图标库iconfont： 这个截图只显示了第一行的图标库，还有很多。 也许，我们需要的，这里都有。 有一点比较遗憾的是，不能直接下载图标库，只能一个个的添加入库（放入购物车，不花钱），加入项目（或新建项目并将入库的小图标加入项目），然后配置下载。 配置的主要是项目名称和图...
vue中引用阿里字体图标的方法
11-29
想在vue中引用阿里的iconfont,却出现报错 ，原因是没有对应的loader处理字体文件。 解决办法 1.引入css文件 import 'font-awesome/css/font-awesome.min.css' 2.在webpack.config中配置 { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file-loader' } 总结 以上所述是小编给大家介绍的vue中引用阿里字体图标的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
【Vue-Element】矢量字体库iconfont字体图标库使用
feifeiyechuan的博客
08-04 1888
矢量字体库iconfont字体图标库使用
ElementUI 图标字体无法正常显示 本地CDN文件
cwyp18809的博客
12-21 5340
文章目录@[toc]一、样式无法正常显示1、检查CDN引用文件路径2、检查是否引入Vue.js文件3、elementUI 必须在Vue作用域里二、elementUI图标等显示异常1、未引用文字图标库文件（1）问题状态（2）解决办法2、已经引用字体图表库文件（1）问题状态（2）解决办法 本文中部分代码来自ElementUI官网 一、样式无法正常显示 1、检查CDN引用文件路径 检查引入elemen...
vue中 使用element-ui 图标和阿里字体图标结合使用
wqnmlgbsz的博客
09-24 825
vue中 使用element-ui 图标和阿里字体图标结合使用 1 登录阿里字体图标官网 2 图标管理 --> 我的项目 --> 创建一个项目 3 开始搜有想要的图标添加到我的项目中 4 下载到本地 5 解压，拷贝到src/asserts/icon下 . ├── demo.css ├── demo_fontclass.html ├── demo_symbol.html ├── demo_unicode.html ├── iconfont.css ├── iconfon.
element-ui中使用第三方字体
improvement
06-06 3736
element-ui中使用第三方字体 ​ 将素材fonts文件夹到assets中,在入口文件main.js中导入 import './assets/fonts/iconfont.css' ​ 然后直接在 需要使用的地方直接用，如下： <el-input prefix-icon="iconfont icon-3702mima"></el-input> ...
用阿里小图标增强Vue项目Element-UI的图标库
综上所述，阿里小图标库为Vue项目中的Element UI提供了丰富的图标资源，通过上述的步骤和方法，可以有效地集成到项目中，提升界面的视觉效果和用户体验。开发者应当根据项目需求灵活应用，并注意图标使用的规范性和...
阿里小图标用以替代element-ui图标
08-10
使用阿里图标库，我们可以为Vue项目中的Element-UI组件添加更多样化、风格独特的图标，提升用户体验。 首先，你需要在阿里图标库官网（http://iconfont.cn/）注册账号并创建自己的项目。在项目中，你可以通过搜索...
element-ui使用iconfont字体图标
weixin_43755104的博客
04-18 1308
element-ui自带图标种类少，可以使用阿里巴巴的字体图标库 版本vue-cli3.x iconfont 官网 先看一下目录 在阿里巴巴图标库找到你想要的图标然后下载到本地 把文件夹复制到src/assets目录 在main.js入口文件进行全局引用 import Vue from 'vue' import App from './App.vue' import router from...
element ui中使用第三方字体小图标(亲测有效)
一只前端小菜鸟
04-03 6139
element ui我就不过多介绍了，它是基于vue的ui组件库，相信使用vue开发的人，难免离不开它们。 那么在日常使用中，我们也可能会发现element ui中的内置小图标非常少，这时就需要我们结合第三方的小图标库来一起使用了。 俗话说 1+1>2 。 那么就拿阿里字体小图标来举例，看看怎么结合element ui一起使用。 1、进入阿里小图标官网，挑选我们喜欢需要的小图标 2...
Element-UI 技术揭秘（5）- 色彩、字体、边框与图标
weixin_45189747的博客
10-13 6940
前言 element-ui 组件库之所以受欢迎，除了组件丰富，文档友好之外，还得益于它的精美的设计。之前在组件库的整体设计文章中提到，element-ui 背后有一只强大的设计团队，他们为组件库了制定了一套设计规范。 需求分析 当我们去设计一套组件库的时候，首先要考虑颜色、字体、边框、图标这些基础元素的设计，它们是构建各个组件的基石，如果没有做好这些基础设计，那么做出来的组件库看上去一定很山寨。 ...
vue中 element-ui引入阿里巴巴图标库两种办法
zj_zj_zj_zj_zj的博客
08-16 1128
一：最初步骤,去阿里巴巴图标库。 过程：https://blog.youkuaiyun.com/mmd0308/article/details/78390783 二：配置： 1.在iconfont.css文件中将改注释的地方注释，该修改的地方修改，即可，如下图所示： 引入方式如下图两种： 效果如下图 2.iconfont.css不做任何修改 引入方式如下图 效果图：引入方式1正...
vue+elementui 字体改用思源黑体
热门推荐
菜鸡奋斗ing的博客
08-21 1万+
微软雅黑存在版权问题，所以改用思源黑体， 实现步骤： 1，项目全局搜索微软雅黑相关的中英关键字，删除字体，包括在node_modules下的。 2.下载思源黑体字体库 https://download.youkuaiyun.com/download/u012138137/11587507 里面已经包含了通过font-face转换得到css字体样式 3.在index.html引入字体 注意问题：1.该字体是放...
下载element-ui 资源，图标 element-icons.woff，element-icons.ttf 无法解码文件字体
最新发布
weixin_51689532的博客
02-29 2703
下载element-ui 资源，图标 element-icons.woff，element-icons.ttf 无法解码文件字体
vue+elementui项目中引入第三方字体文件的方法示例
weixin_44039043的博客
11-20 3005
# 问题描述： vue中项目，发现相同页面在不同电脑上，字体显示效果不一致，例如：代码中设置了楷体，在某些电脑上显示不是楷体效果。 # 解决方案： 1.先下载字体文件所需的.ttf文件(这不很重要，你得找到对应ttf字体文件) 我这里想引入的是华文行楷字体2.将字体文件引入 自己定义一个文件夹，放入下载好的.ttf文件 2.先自己定义一个font.css文件，将下载好的字体文件的路径引入 @font-face { font-family: “华文行楷”; src: url(‘stxingka.ttf’);
elementui loading自定义图标和字体样式
程小博衍的博客
01-04 2859
需求：页面是用了很多个loading，需要其中有一个字体大些（具体到图标也一样的方法，换下类名就行）遇见的问题：改不好的话会影响其他的loading样式（一起改变了）自定义类名成功加载到标签上的效果，是加在mask后面。关键知识点：element的loading自带的。属性的使用（Loading 的自定义类名）
element ui设置字体和背景
m0_64276091的博客
10-22 3981
element ui设置字体和背景
第六章 element-ui组件 字体和边框
weixin_44224089的博客
08-11 1499
一、字体参数 字号 层级 字体大小 举例 辅助文字 12px Extra Small 用 Element 快速搭建页面 正文（小） 13px Small 用 Element 快速搭建页面 正文 14px Base 用 Element 快速搭建页面 小标题 16px Medium 用 Element 快速搭建页面 标题 18px large 用 Element 快速搭建页面 主标题 20px Extr
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值