2021-11-26 vue项目中如何引入iconfont图标库

已于 2022-10-25 17:39:53 修改
阅读量222 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端 iconfont vue
于 2021-11-26 14:33:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rowlet/article/details/121559540
版权
1.下载

在iconfont官网上下载选好的项目中的图标,解压获得一个文件夹,复制其中的文件到vue项目的assets/iconfont文件夹下

2.引入

在main.js中引入import '@/assets/iconfont/iconfont.css'/

3.使用

在需要的template标签中使用 <i class="iconfont icon-dianying">热映电影</i>

4.结果

在这里插入图片描述

前端OnTheRun
关注
专栏目录
如果只做前端验证的话，谈jjdd.com的看照片功能。
weixin_34032827的博客
06-29 563
如果你在上海，并且坐过地铁的话，你肯定知道jjdd.com。 这个网站和百合，世纪佳缘类似，都是交朋友的性质。 在jjdd.com中有个很重要的功能：如果你上传的照片比你想看的人少的话，你是不能看她的照片的。 例如如果你登录了,并且点击”个人形象照的话”   一般人碰到这里，就会自然而然的有两种选择： 1：算了，不看了。 2：那我就多上传几张照片，从而可以看别人的照片。 如果...
JJDD-Guestbook(简简单单留言本) 0.0.4.rar
05-23
JJDD-Guestbook(简简单单留言本) v0.0.4 说明： 纠结的版本！只是将原版本J001_0.0.3bd1修改为面向对象的方式运行和做了一些美化，但在程序中好象又有违背面向对象思想原则…… 管理页面：admin/index.php 默认管理账户密码都是 admin
初学小游戏开发---学习笔记1
lzj_jjdd的博客
07-15 198
1.小游戏开发者通过在根目录编写一个 game.json 文件进行配置，开发者工具和客户端需要读取这个配置，完成相关界面渲染和属性设置。key数据类型说明默认值deviceOrientationString支持的屏幕方向portraitshowStatusBarBoolean是否显示状态栏falsenetworkTimeoutNumber网络请求的超时时间，单位：毫秒60000networkTim...
vue项目中引用iconfont图标库图标
最新发布
lang_xw的博客
10-18 332
4、到需要使用的项目中，找到index.html文件，加入如下代码，href内容为刚刚复制的代码。2、点开购物车图标，将新加入库的图标添加至项目，没有项目就新建一个项目。3、选择Font class，点击生成代码，复制生成的代码。6、设置大小/颜色等样式可通过直接修改样式来调整。，找到需要的图标，添加入库。
vue项目引入iconfont图标
eqizhihui的博客
10-07 2379
点击添加至项目，就会出现一个加入项目的操作框，若之前没有新建过项目的（或者需要放到其他项目但是又没有新建的情况下），可以点击右边的新建按钮新建，若有项目的情况下，可以直接点击该项目，点击确定即可。2.若是在资源管理->我的项目->新建项目中新建，则需要填写一下信息，基本都有默认值，直接新建的情况下就是处理项目名意外就是默认值，而此处新建则可以自定义。步骤四：项目引入，首先点击下载至本地将项目压缩包下载到本地中，解压缩文件至你自己的代码项目中，此处我放到了assets目录下，其子目录可自定义。
vue项目中引入iconfont
2401_84093054的博客
04-20 899
兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
如何在VUE中引入 iconfont-阿里巴巴图标
m0_66051368的博客
05-10 713
引入 Fontclass 第二步：将 Font class 字体链接 通过 import 引入到自建的 css文件中，并在.vue 项目中通过 <i> 标签使用。注意 <i> 标签必须有class名 iconfont，另一个class类名为要使用的图标名，获取方式如下图 ......
Vue 引入阿里巴巴Iconfont图标库
qq_49080170的博客
08-15 468
Vue 引入阿里巴巴Iconfont图标库
Vue - 项目中使用iconfont（阿里图标库）
热门推荐
技术共享，共同进步！
07-17 1万+
Vue - 项目中使用iconfont（阿里图标库）
vue项目中使用iconfont图标库方法记录
leonardodawatch的博客
10-08 130
在项目的静态资源目录下，创建用来存放图标文件的文件夹，我取的名字是font_flower，在其中放入上一步骤中提到的css文件和字体文件，并在入口js文件（main.js）中局引入。可能会遇到实际显示的图案跟选用的图标不同的情况，造成的原因是项目中已经有重名的图标了，可以在下载图标前修改iconfont网站里的项目设置来解决。解压之后的图标目录是这样的，需要用到的是圈起来的css文件和包含的字体文件。在上面提到的css文件中可以查看到图标的名字。
vue项目引入Iconfont图标库的教程图解
10-17
在Vue项目中，引入Iconfont图标库是一种常见的实践，特别是在Element UI等前端框架无法满足所有图标需求时。本文将详细讲解如何将Iconfont图标库整合到Vue项目中，以实现自定义图标的需求。 首先，你需要访问阿里...
Vue引入使用iconfont字体图标
m0_51431448的博客
08-08 432
由于element-ui或element-plus提供的图标有时候并不能满足日常需求，所以这篇介绍一下前端引入阿里巴巴矢量图标库使用，其实不止vue哈，html也是同样的道理。
vue项目引入彩色iconfont图标
yummy_yuyu的博客
03-29 2472
做项目的时候经常会使用到iconfont图标库，在项目开始的时候提前想好需要什么图标，最好是多下载几个可替换的同类型图标，宁滥勿缺（别问，问就是得到了教训），无色的还是彩色的，这点很重要。 首先了解一下如何在项目中使用iconfont图标 进入官网iconfont图标库搜索想要的图标 添加到项目中，点确定，没有项目就在旁边的加号新建 选择Font class,点击下载至本地，选择自己要放置在项目中的位置 解压压缩包到当前文件夹，得到以下文件，我只保存了这几个重要的 项目...
2021-08-08 解决“These dependencies were not found“的报错
GAARA
08-08 4648
场景 使用命令:npm i -S axios后,再次运行vue项目,出现题述报错 解决 输入如下命令: npm install --save
2021-07-31 v-for实现多层嵌套遍历(二维数组的遍历)以及遍历数组与对象的用法
GAARA
07-31 4083
1.v-for实现多层嵌套遍历 代码 <div id="app"> <div v-for="(item,index) in person"> 我叫{{item.name}},我每天上午: <!-- 注:item.daily是把item取出来给第二层用 --> <div v-for="(items,indexs) in item.daily"> {{items.am}}
2021-07-29 vue事件冒泡和事件捕获,阻止冒泡和阻止浏览器默认行为
GAARA
07-29 2111
文章目录0.概要1.事件冒泡和事件捕获1.1.事件冒泡例子1.2.事件捕获例子2.阻止冒泡和阻止默认行为例子 0.概要 1.阻止冒泡:@click.stop=‘fn’ 2.阻止浏览器的默认行为:@click.prevent=‘fn’ 3.事件捕获:@click.capture=‘fn’ 1.事件冒泡和事件捕获 1.1.事件冒泡例子 html: <div id="app"> <div id="car" @click="type('车')"> <div id="benzcar
2021-07-05 解决:使用vue定义多个单标签组件时,只显示第一个组件
GAARA
07-05 1761
发现问题 设置两个组件.不能全部显示 出现原因 用单标签的时候，只会显示第一个组件 改成双标签后，就会显示两个组件了。 代码 html <div id="app"> <!-- 多标签 --> <!-- <my_component1></my_component1> <my_component2></my_component2> --> <!-- 单标签 --> &l
2022-11-21 vue3有哪些新增特性?
GAARA
11-21 1409
一.vue3快速上手 1.vue3带来了什么? 性能的提升 源码的升级 更好地支持Typescript 新的特性 特性1.Composition API(组合API) 特性2.新的内置组件 特性3.其他改变 2.vite vite是新一代前端构建工具,有如下优势 [使用vite创建一个vue3项目:`create-vite-app vue3_vite`](https://blog.csdn.net/x550392236/article/details/120323139) 对比:使用脚手架vue-cli创建
2021-08-01 总结:v-bind绑定样式的五种方式
GAARA
08-01 1000
总结 1.数组绑定多个class html: :class="['yanse','ziti']" css: .yanse{} .ziti{} 2.数组包含对象绑定class html: :class="[{yanse:flag},'ziti']" js>data: flag:true/false 3.数组包含方法绑定class html: :class="[biankuangShow(),'ziti']" js>methods: biankuangShow(){} 4.数组绑定多个style
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值