vue工程中引入iconfont图标库

最新推荐文章于 2024-11-01 12:15:25 发布
最新推荐文章于 2024-11-01 12:15:25 发布
阅读量170 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 杂记 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_36567996/article/details/98871500
本文详细介绍如何从iconfont.cn选择并下载图标库，包括账号登录、图标添加至项目、下载及在工程中应用的过程。

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

工程中 添加图标库
1.在iconfont.cn中登录账号 （https://www.iconfont.cn/）
2.点击图标 加入到购物车中
3.点击购物车添加至项目（无项目 创建一个就OK）
4.点击项目编辑图标的名称 Font Class / Symbol （icon name）点击保存即可
5.点击下载至本地 将会下一个zip包
6.解压zip包 把其对应的文件拷贝到工程中
7.在工程的index.html和post.html 引入即可
8.使用 iconfont.css中 font-family： ‘xxx’ xxx 图标名称 (xxx icon-tianping)

Vue引入使用iconfont字体图标
m0_51431448的博客
08-08 1068
由于element-ui或element-plus提供的图标有时候并不能满足日常需求，所以这篇介绍一下前端引入阿里巴巴矢量图标库使用，其实不止vue哈，html也是同样的道理。
vue项目中引入iconfont
2401_84152928的博客
05-07 1111
兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。兼容性良好，支持ie8+，及所有现代浏览器。相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。不过因为本质上还是使用的字体，所以多色图标还是不支持的。
Vue使用Iconfont图标库
Joey_Tribiani的博客
04-24 1644
Vue使用Iconfont图标库 创建vue项目 先基于Vue脚手架vue-cli搭建Vue2.x项目 vue create icontest 安装依赖并运行 // 安装 yarn (npm install) // 运行 yarn serve (npm run serve) 创建iconfont项目仓库 正在iconfont官网找到资源管理下拉菜单的我的项目选项，进去后点击加号创建项目 创建好项目后就可以尝试添加图标到项目 引入到前端项目 在刚刚创建好的vue项目中的/src/assets目录下
Vue项目使用iconfont图标库
青年码农
11-03 614
最近一直在更新Vue项目中配置及使用一些内置的方法，今天讲一讲Vue项目中使用iconfont图标库，不管是管理平台还是官网展示之类的显示页面，都会用到一些小图标，如果我们用img标签，那我们的资源库会非常的大，而且后期如果我们针对图标调整大小，改色等之类的操作，就需要用到Photoshop等专业类工具，上手困难不说，而且比较麻烦，下面就说下Vue使用iconfont图标...
vue项目引入Iconfont图标库
weixin_30388677的博客
10-23 598
在进行项目开发过程中,vue项目中前端所使用的UI框架是element ui,但是element的字体图标库不足以满足日常开发的需要,或者公司项目要求使用本公司ui设计的图标,都可以参考以下的步骤, 1. 在阿里图标库中选中你想要的图标库,并点击进去, 2. 注意: 我们在选择图标是后,如果是需要多个图标就将选中的图标加入购物车,但是如果我们没有在这一个图标库中找到自己需要的图...
Vue3巧用iconfont字体图标库（建议收藏）
爱勇宝
02-05 4719
最近在开发项目中研究了一下阿里妈妈出品的阿里iconfont矢量图标库。看完之后只想说一句，妈妈再也不用担心我的网站找不到图标啦~
用vue把iconfont阿里巴巴的图标封装成组件（可该颜色、大小、增加css动画等样式）
qq_68155756的博客
05-30 759
一般来说iconfont图标库是下载图片作为icon，这样对编码来说就有些局限性，比如不能图片的颜色，css动画等等，我们来把iconfont的图标库封装成组件就可以实现： 1. 在components文件夹下创建个空的myIcon.vue文件： 2. 在iconfont-阿里巴巴矢量图标库中找到适合自己项目的icon，我随便找了一个，然后不下载图片，点击复制svg代码： ......... 以上是更改颜色，除此之外还可以把myIcon完全当做组件来用，比如增加css的animation动画：
vue项目引入Iconfont图标库的教程图解
10-17
在Vue项目中，引入Iconfont图标库是一种常见的实践，特别是在Element UI等前端框架无法满足所有图标需求时。本文将详细讲解如何将Iconfont图标库整合到Vue项目中，以实现自定义图标的需求。 首先，你需要访问阿里...
Uniapp在Vue环境中引入iconfont图标库（详细教程）
驴大毛的博客
11-01 1536
Uniapp在Vue环境中如何引入iconfont图标库的详细教程
vue项目安装/使用font-awesome字体图标库
一只程序媛
05-08 3761
1.npm安装font-awesome npm install font-awesome --save 安装成功后，在node_modules文件夹新增font-awesome文件夹 2.在main.js引入css import 'font-awesome/css/font-awesome.min.css' 3.在页面中使用 <i class="fa fa-align...
阿里巴巴图标库的字体图标使用方法
weixin_43698398的博客
01-22 7487
有时候，阿里巴巴矢量图标库没有项目所需的图标，这时候我们就需要在Iconfont网站上传svg矢量图生成字体图标，再下载使用 具体步骤如下： 1.点击Iconfont网站的上传，然后点击上传图标。 2.然后便可以看到打开的图标，并且下方有两个选择，根据自己的需要选择是否保留颜色提交，提交后便可以在自己的账户看到上传的图标。 3.若需要所有图片，可直接批量加入购物车，查看购物车，有三个下载选项，选择添加至项目，这里需要填写项目名称，然后就可以在自己的账户下看到刚添加的图片 4.将图标下载至本地，直
iconfont图标字体库详细介绍
Jinuss的博客
09-03 4971
iconfont的使用方式，最详细的教程
微信小程序-组件和样式（4）字体图标之阿里巴巴矢量图标库的使用
weixin_42284031的博客
05-31 1062
阿里巴巴矢量图表库的网址：阿里巴巴矢量图标库 在搜索框输入我们需要的图标文本，比如首页/配送/时间等，就会搜索到各种文本图标： 选中文本图标，点击购物车，选择项目： 可以编辑首页项目，比如icon class的名称： 点击生成在线链接，点击.css链接查看生成的CSS代码 二.在微信小程序中使用阿里巴巴矢量图标库 2.1 创建矢量图标库文件夹和文件 注意：在引用之前需要在全局.scss文件里引用矢量.scss文件，使用@import关键字 三.常见错误及解决办法 官网解释，这种错误不影响小程序
微信小程序-时间轴样式实现
森海北屿 ღ
03-20 1071
实现效果： wxml代码： <view class='history_con'> <block wx:for="{{historyTodayData}}" wx:key="year" data-index="{{index}}"> <view class='history_item_list'> <text class="iconfont icon-timefill "></text> <view cla
iconfont字体矢量图标的使用方法
关注最新技术问题并持续维护更新
04-15 4566
iconfont字体图标的使用 打开阿里巴巴矢量图标库 https://www.iconfont.cn/ 点击登录 使用github账号登录，其他账号也可以 找一组图标点击去，添加入库 点击购物车图标 点击添加进项目，没有项目可以创建 这里选择的是Unicode引用，点击下载至本地 把下载好的文件解压出来，放到项目的css和fonts文件夹 注意iconfont.css里的文件路...
iconfont字体图标下载及使用方法
qq_42724424的博客
02-12 8837
一、下载方法 1.打开阿里iconfont，将所要下载的图标依次添加至购物车，然后点击右上角的购物车，点击添加至项目 2.选择font class，点击下载至本地 3下载后的文件应包括以下几项 4.将打钩的文件保存至一个文件夹中，注意，这里如果缺少文件，需要从“项目中”的项目设置修改设置 二、使用方法 1.将iconfont放入css文件夹中，将其余文件放入一个文件夹中，注意，iconfont.css文件夹中的路径要与其余文件的路径对应：如下图： 2.在引入字体图标的时候，需加两个类名，一个是默认的ic
阿里字体图标（iconfont）使用
RistonTea的博客
08-22 7643
1.进入阿里矢量图标库（www.iconfont.com） 2.登录，登录后进入图标管理----我的项目 3.新建项目,输入项目名，项目描述 4.进入图标库---官方图标库，将项目中所需的图标一起添加入库（购物车），最后添加至所建的项目(如：travel项目) 5.进入我的项目，点击下载至本地 6.下载完成时，在下载的压缩包解压，里面的.js文件和.html文件可丢弃，只需要ic...
element elcolumn 使用本地图片_(转载)Vue Element使用icon图标教程详解(第三方)
weixin_39699746的博客
11-25 1221
Vue Element使用icon图标教程详解(第三方)转载 作者：方丈先生 element-ui自带的图标库不够全，还是需要需要引入第三方icon。下面小编给大家带来了Vue Element使用icon图标教程，感兴趣的朋友一起看看吧element-ui自带的图标库还是不够全，还是需要需要引入第三方icon，自己在用的时候一直有些问题，参考了些教程，详细地记录补充下对于我们来说，首选的当然是阿...
iconfont 在原有的图标中，增加新的图标
热门推荐
别皱眉
11-28 2万+
第一步 下载样式 http://www.iconfont.cn/ 选择图表，点击加入购物车 第二步 解压下载文件到项目 css中 第三步 修改文件名称 与 iconfont.css 名路径 第四步 将@font-face 拷贝到原 iconfont.css 中 第五步 .icon-icongerenjishiben:before { content: “\e6a3”; } .ico...
vue项目引入iconfont图标
最新发布
01-01
### 添加并使用 Iconfont 图标 #### 注册与获取图标 为了在 Vue 项目中使用 Iconfont 字体图标，需先访问 Iconfont 官网完成账号注册，并挑选所需的图标加入购物车创建图标库[^1]。 #### 下载图标资源 下载所选图标的压缩包至本地环境。该压缩包内含 `iconfont.css` 文件及其他必要文件，如字体文件等。确保按照实际情况调整这些文件的引用路径以防止加载失败[^3]。 #### 配置 Webpack 或 Vite 构建工具 对于采用 Webpack 的 Vue CLI 项目，在 `src/assets/styles` 目录下新建或编辑 CSS/SCSS 文件来导入 `@import url('//at.alicdn.com/t/font_xxx.css');` 这样的远程样式表链接；如果是基于 Vite 创建的新一代应用，则可以在全局样式入口处添加相同语句实现自动引入[^4]。 #### 使用图标组件 当一切配置就绪之后就可以像下面这样轻松调用所需图标了： ```html <i class="iconfont icon-eye"></i> ``` 如果要展示彩色版本则依照官方文档说明操作即可。 #### 更新已有项目的图标集 针对已经集成过一次 Iconfont 并想要追加更多样式的场景，建议把最新版 @font-face 规则合并入旧有的 style 表达式里去，同时留意解决可能存在的同名冲突问题[^5]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值