vue引用iconfont图标

最新推荐文章于 2024-05-07 02:25:48 发布
最新推荐文章于 2024-05-07 02:25:48 发布
阅读量162 收藏
点赞数
文章标签： vue.js html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46946918/article/details/120459972
版权

1.把图标下载到本地解压，把里边的文件拷贝到static下（建议新建一个asstes文件夹专门存放，文件目录如下）
在这里插入图片描述

2.打开iconfcont.css修改url，把data开头的删除了，不然会报错
在这里插入图片描述
3.文件目录前插入./![在这里插入图片描述](https://img-blog.csdnimg.cn/4438b034f4584333943d96170bf442fd.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAQk1ha2Vy,size_20,color_FFFFFF,t_70,g_se,x_16
4.将文件iconfcont引入到main.js中
5.运行npm install css-loader -s
6.在页面中试使用xxx为你的icon名
在这里插入图片描述
这个就是正确的，如果不正确，请检查每一步
。

BMaker
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何在Vue中引入iconfont
weixin_46285310的博客
08-06 4209
首先在了解了Vue的基础上，知道和一般的html代码里引入的方式会有所不同，那么如何引入呢 第一步：首先在某图标库里搜索你想要的图标 第二步：点击图标添加到购物车里如下图所示 第三步：点击右上角购物车，会出现一个列表我们这里选择添加到项目，如果没有，则再右下角新增一个项目 第四步：点击之后会跳转到项目里如图，这里我们选择Font class 如有特殊需要，点击项目设置，设置一些选项，这里有一个前缀可以设置，避免与你的vue项目里的css或者命名参生冲突 第五步：...
vue项目引入iconfont图标
eqizhihui的博客
10-07 2209
点击添加至项目，就会出现一个加入项目的操作框，若之前没有新建过项目的（或者需要放到其他项目但是又没有新建的情况下），可以点击右边的新建按钮新建，若有项目的情况下，可以直接点击该项目，点击确定即可。2.若是在资源管理->我的项目->新建项目中新建，则需要填写一下信息，基本都有默认值，直接新建的情况下就是处理项目名意外就是默认值，而此处新建则可以自定义。步骤四：项目引入，首先点击下载至本地将项目压缩包下载到本地中，解压缩文件至你自己的代码项目中，此处我放到了assets目录下，其子目录可自定义。
vue前端项目引入iconfont阿里图标的四种方式
热门推荐
qq_35430000的博客
02-12 2万+
一、首先登陆阿里云矢量图标库，把需要的字体图标加入到自己的项目中 http://www.iconfont.cn/home/index 二、阿里云图标的四种方式（推荐第二种方式Font class引入，如果不考虑网络问题可以用在线引入的方式） 进入项目以后会看到阿里云可以选择三种方式进行导入图标 （1）unicode unicode的主要的特点是 优势 ①兼容性最好，支持ie6...
Vue引入阿里妈妈iconfont图标
2301_76662406的博客
05-05 1357
此外，index.html 中通过 标签引入了 Vue 应用程序的 JavaScript 文件（app.js），它包含了 Vue 组件和应用逻辑的代码。ESLint 是一个用于在 JavaScript 代码中进行静态代码分析和检查的工具，它可以帮助开发人员发现和修复潜在的问题、统一代码风格，并遵循预定义的规则和最佳实践。.eslintrc.js 文件用于配置 ESLint 的规则和选项。在 ESLint 的配置中，有两个重要的文件：.eslintignore 和 .eslintrc.js。
vue项目正确引入iconfont详细操作
iaz999的博客
03-21 2710
引入iconfont的注意事项
iconfont 图标在vue里的使用
宁波阿成的博客
08-25 648
iconfont 图标在vue里的使用
vue 引入iconfont自定义图标
chpswg的专栏
07-05 2551
1、在阿里的iconfont 页面(https://www.iconfont.cn)注册账号，新建项目，添加感兴趣的图标到自己新建的项目，修改图标的类名，下载项目到本地，解压 2、在asset下的lib目录下新建iconfont目录，将步骤1中的文件拷贝到这个目录 3、修改iconfont.css文件，修改引用文件的目录结构,主要是添加头部及修改默认的iconfont类的样式（下次下载...
vue项目使用iconfont的最佳实践
08-12
虽然直接引入`iconfont.css`方便快捷，但为了减少HTTP请求，可以将所有图标转换为符号引用（symbol），并在需要的地方按需引入。这可以通过修改`iconfont.svg`文件和`iconfont.js`文件来实现。在Vue组件中，使用`v-...
在vue项目中正确使用iconfont的方法
12-29
1、打开 iconFont官网 选择自己喜欢的图标，并且添加购物车 ...3、下载至本地 4、把我们下载好的文件...6、在在vue文件中引用”iconfont icon-zitigui-xianxing> 7、假如报错，需要下载css-loader依赖包 npm install cs
taro-iconfont-cli:在Taro框架中使用iconfont图标，支持多端，支持多色彩，不依赖字体
05-02
在Taro框架中使用iconfont图标，不依赖字体，支持多色彩。 支持平台 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 H5 特性 1、一键生成标准组件，多端支持 2、使用方便，import即可 3、支持多色彩 4、...
vue中引用阿里字体图标的方法
11-29
想在vue中引用阿里的iconfont,却出现报错 ，原因是没有对应的loader处理字体文件。 解决办法 1.引入css文件 import 'font-awesome/css/font-awesome.min.css' 2.在webpack.config中配置 { test: /\.(eot|svg|ttf|...
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
`iconfont`是一种流行的在线图标服务，允许开发者将图标作为Web字体来使用，从而实现响应式和易于维护的图标设计。在Vue CLI项目中，我们通常会将`iconfont`的CSS样式和字体文件引入到项目中。然而，当使用`webpack`...
VUE项目中引入icon
poluocook的博客
08-22 1089
VUE项目中引入icon
【iconfont图标】vue引入并使用阿里巴巴iconfont图标流程【uniapp引入iconfont真机APP不显示问题解决，移动端引入报错解决】
seeeeeeeeeee的博客
11-28 4951
为什么要使用阿里图标库： 图标现在是很多地方都会用到的 一般我使用的时候都是直接在ui库中比如elementul自带的一些 有时候哪怕是感觉图标不是非常适合也是用的elementul图标，主要原因是懒 因为能直接复制的，就懒得再去阿里图标库下载遍，差不多就行了。 但是总有些时候你需要的图标是真的在elementul里没有的或者完全不适合的。 这时候我们需要去到阿里的图标库里找找，这里的图标非常多，完全可以满足一切需求了。1，Unicode：兼容性好，ie低版本也好用，可以和文字一样调整颜色和大小。缺点是不显
vue项目中引入iconfont，初学者必看
2401_84097427的博客
04-04 1628
兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取。
vue项目中引入iconfont
2401_84447149的博客
04-27 771
兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。兼容性良好，支持ie8+，及所有现代浏览器。相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。不过因为本质上还是使用的字体，所以多色图标还是不支持的。
vue项目中引入iconfont(1)
最新发布
2401_84152911的博客
05-07 756
兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。兼容性良好，支持ie8+，及所有现代浏览器。相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。不过因为本质上还是使用的字体，所以多色图标还是不支持的。
jQuery概述，架构师必备技能
2401_84094725的博客
04-04 414
去jquery官网下载jquery代码，在项目中新建jquery.min.js文件，将在jquery官网得道的jquery代码复制到jquery.min.js文件中。代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！2.6、JQuery对象和DOM对象的转换。2.5、JQuery对象和DOM对象。2.4、jQuery的顶级对象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值