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

原创 已于 2022-10-25 17:39:53 修改 · 249 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端 #iconfont #vue

于 2021-11-26 14:33:28 首次发布
本文介绍了在Vue项目中集成和使用Iconfont图标库的详细过程：首先从Iconfont官网下载并导入项目文件，接着在main.js中引入样式文件，最后在模板中直接使用图标类名展示图标。
1.下载

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

2.引入

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

3.使用

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

4.结果

在这里插入图片描述

Can‘t convert value at index 8 to dimension: type=0x10
johnnyjjdd的博客
02-09 1765
Can’t convert value at index 8 to dimension: type=0x10 解决方法 自定义view的时候，当设置view的width或height时候，自定义属性设置如下： <attr name="titleWidth" format="dimension"> <enum name="match_parent" value="-1" /> <enum name="wrap_content" value="-2"
如果只做前端验证的话，谈jjdd.com的看照片功能。
weixin_34032827的博客
06-29 696
如果你在上海，并且坐过地铁的话，你肯定知道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 250
1.小游戏开发者通过在根目录编写一个 game.json 文件进行配置，开发者工具和客户端需要读取这个配置，完成相关界面渲染和属性设置。key数据类型说明默认值deviceOrientationString支持的屏幕方向portraitshowStatusBarBoolean是否显示状态栏falsenetworkTimeoutNumber网络请求的超时时间，单位：毫秒60000networkTim...
vue项目引入iconfont阿里图标的四种方式
观千剑而后识器，操千曲而后晓声。
12-13 3841
vue项目引入iconfont阿里图标的四种方式，优化项目配置的必备技能
vue项目中引用iconfont图标库图标
lang_xw的博客
10-18 846
4、到需要使用的项目中，找到index.html文件，加入如下代码，href内容为刚刚复制的代码。2、点开购物车图标，将新加入库的图标添加至项目，没有项目就新建一个项目。3、选择Font class，点击生成代码，复制生成的代码。6、设置大小/颜色等样式可通过直接修改样式来调整。，找到需要的图标，添加入库。
Vue3 项目引入阿里 iconfont 图标和字体的多种方式
共同学习，共同成长
09-19 5309
对比阿里图标库提供的3种图标引用方式：unicode、font-class、symbol。以及在vue3+vite+ts的项目中封装并使用阿里iconfont图标组件，以及如何使用阿里字体图标。
vue项目引入iconfont图标
jyn15159的博客
08-18 1044
在vue项目中引入iconfont字体图标
vue项目中引入iconfont
2401_84093054的博客
04-20 1000
兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
vue3项目 引入 iconfont字体图标
👨‍💻 前端开发者 | 技术分享者
07-17 541
一、获取 Iconfont 资源文件1. **登录 Iconfont 官网**访问**阿里巴巴矢量图标库**并登录账号。2. **创建项目 & 添加图标**选择所需图标 → 点击「添加入库」进入「购物车」 → 点击「添加至项目」（选择已有项目或新建）3. **生成图标文件**在项目页面选择「Font class」方式 → 点击「生成链接」或「下载至本地」：- **在线链接**：复制格式的 CSS 链接- **本地文件**
vue项目引入Iconfont图标库的教程图解
10-17
在Vue项目中，引入Iconfont图标库是一种常见的实践，特别是在Element UI等前端框架无法满足所有图标需求时。本文将详细讲解如何将Iconfont图标库整合到Vue项目中，以实现自定义图标的需求。 首先，你需要访问阿里...
vue项目引入Iconfont图标库的图解教程
最新发布
11-18
本文将详细指导您如何将Iconfont图标库成功整合到您的Vue项目中，以实现自定义图标的需求。 首先，请访问阿里图标库（Iconfont）官方网站，浏览并选择所需的具体图标。 在挑选过程中，您可以将选定的图标加入购物车...
2021-08-08 解决“These dependencies were not found“的报错
GAARA
08-08 4865
场景 使用命令:npm i -S axios后,再次运行vue项目,出现题述报错 解决 输入如下命令: npm install --save
2021-07-31 v-for实现多层嵌套遍历(二维数组的遍历)以及遍历数组与对象的用法
GAARA
07-31 4242
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 2198
文章目录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 1877
发现问题 设置两个组件.不能全部显示 出现原因 用单标签的时候，只会显示第一个组件 改成双标签后，就会显示两个组件了。 代码 html <div id="app"> <!-- 多标签 --> <!-- <my_component1></my_component1> <my_component2></my_component2> --> <!-- 单标签 --> &l
2022-11-21 vue3有哪些新增特性?
GAARA
11-21 1505
一.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创建
vuex的安装和使用,vuex的核心概念state,mutations,actions,getters和modules,以及相关的辅助函数mapState,mapMutations等
GAARA
04-29 1107
Vuex是vue的状态管理工具,状态就是数据通俗来说,Vuex是一个插件,帮我们管理vue通用的数据(多组件共享的数据)共同维护一份数据,集中化管理响应式变化操作简洁,vuex的辅助函数立大功。
2021-08-01 总结:v-bind绑定样式的五种方式
GAARA
08-01 1078
总结 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
vue中如何引入iconfont图标
04-18
好的，我现在需要帮助用户解决在Vue项目中引入iconfont图标的问题。首先，用户的问题很明确，想知道具体的使用方法。我需要结合提供的引用内容，整理出一个清晰的步骤指南。 首先，我应该回忆一下iconfont的基本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

前端OnTheRun

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

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

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

打赏作者

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

抵扣说明：

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

余额充值