vue 本地使用iconfont

已于 2023-04-14 11:34:56 修改
阅读量248 收藏
点赞数
分类专栏： Iconfont 文章标签： vue.js javascript 前端
于 2022-07-28 14:28:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46252229/article/details/126034167
版权

iconfont的使用

1. 新建项目

  1. 选择需要的图标添加购物车
    在这里插入图片描述

2.添加项目

  1. 导入对应的项目中
  2. 选择Symbol下载至本地
  3. 将压缩包进行解压，将压缩包如下后缀的文件放入项目中
iconfont.css
iconfont.ttf
iconfont.woff
iconfont.woff2
  1. app.index导入
import './assets/fonts/iconfont.css'

3. 页面使用

    <van-icon class-prefix="iconfont qywx-fasong" name="extra" size='20'/>

在这里插入图片描述

LinDon_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在vue项目中(本地)使用iconfont字体图标的三种方式
艾欢欢的博客
05-06 8441
使用前的准备和三种使用方式介绍，参考这里 开始使用： 点击下载到本地 在了路径 src/assets 下新建文件夹 iconfont ，用来存放字体图标的本地文件 解压下载到本地的字体图标文件，放到 iconfont 文件夹下 如过项目中没有下载 css-loader 依赖包，就进行下载，否则会报错 npm install css-loader -D 然后在 main.js...
vue项目使用iconfont的最佳实践
08-12
vue项目使用iconfont的最佳实践
Vue项目中本地引用Iconfont(阿里巴巴图标库)-svg图标样式使用 & element UI和ant design皆可
weixin_44867717的博客
09-20 7441
Vue项目中本地引用Iconfont(阿里巴巴图标库)-svg图标样式使用 & element UI和ant design皆可 下载图标 先进入iconfont.cn页面 iconfont官网：https://www.iconfont.cn/ 方法见上 使用一 准备工作 1、先注册，再登录、找到图标管理、我的项目 2、点紫色的这个创建自己的项目 新建项目界面如下 3、图中画蓝线的地方很重要 1）、FontClass/Symbol前缀这个很重要，一定不要写成：el-icon-***这样的形式
vue 中 iconfont 下载至本地 使用方法
josiecici的博客
12-03 1361
首先需要一个图标的集合，然后下载到本地 然后将下载的文件移入到项目里面，文件夹里面的东西有这些 最后导入使用 导入的是这个css文件 使用 使用就在这个html内找icon的类名 在项目里面我就用了两个类名 最后效果： ...
iconfont图标本地使用
weixin_43640375的博客
07-23 1354
iconfont图标本地使用 1. 选择图标添加进项目 2. 选择Symbol 下载至本地 3. 解压缩, 将下列文件拷贝至本地目录 iconfont.css iconfont.ttf iconfont.woff iconfont.woff2 4. 导入iconfont.css import '../../assets/icons/upgrade/iconfont.css' 5. 使用 icon="iconfont icon-tubiaozhizuomoban" 必须加 iconfont 这个前缀
vue引入本地iconfont图标字体
lilongwei4321的博客
09-11 3611
1、下载iconfont图标至本地 2、项目中新建文件夹，并把以下文件放到文件夹中 3、打开app.vue页面，import引入对应的地址 &lt;template&gt; &lt;div id="app"&gt; &lt;router-view/&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export
Vue中下载iconfont到本地使用
zzzzzzzi111的博客
08-30 537
Vue中下载iconfont到本地使用
在vue项目中正确使用iconfont的方法
12-29
1、打开 iconFont官网 选择自己喜欢的图标，并且添加购物车 ...3、下载至本地 4、把我们下载好的文件...6、在在vue文件中引用”iconfont icon-zitigui-xianxing> 7、假如报错，需要下载css-loader依赖包 npm install cs
vue和小程序项目中使用iconfont的方法
01-19
一、vue中使用iconfont 1、百度搜索iconfont或者阿里巴巴矢量图标库官网，注册登录； 2、找到图标管理->新建项目，或者使用已有的项目，用于保存自己的图标； 3、搜索自己需要的icon； 4、添加到购物车中； 5...
在Vue中使用icon 字体图标的方法
12-02
2但是考虑网络及用户体验 阿里iconfont下载本地使用 1 阿里iconfont图标直接下载到本地 2 在assets文件下创建iconfont文件夹 把这些文件放入文件夹 3 iconfont.css文件中改路径 4 在main.js中引入ic
vue使用自定义icon图标的方法
12-11
推荐使用阿里爸爸矢量图标管理，iconfont 使用方法 登录账号，找到需要的图标加入购物车 然后添加到项目  再然后下载代码到本地 下载代码文件然后解压出现这列表 打开HTML文件，引用方法教程 补充我人的坑，...
vue项目引入iconfont
KAMHUNCHAN的博客
06-14 158
将iconfont.css以及iconfont.ttf这两个文件放到vue项目目录下，在app.vue引入。将iconfont图标添加至项目，点击整个项目下载到本地。然后在页面中就可以使用字体图标了。
iconfont引用
m0_55717177的博客
10-14 306
       最近做一个后台管理系统，是用iview+vue cli2做的，在做的过程中需要将左侧的导航栏加入icon图标，但是iview库里的图标和UI要求不符，这就需要引入自己的图标库。 1. UI设计师会把自己做的图标库上传到阿里巴巴图标库，打开设计师给的图标库地址，把所有要用到的图标点击加入购物车   2. 到购物车中点击添加至项目 &nbs...
vue引用iconfont两种方式
a5252145的博客
08-17 1554
vue引用iconfont两种方式 引入本地文件。 a. 把iconfont项目下载到本地。 b. 解压出来，放在项目中static（静态文件夹）下。 c. 在main.js中引入iconfont:import '../scripts/iconfont/iconfont.css'; d: 在页面中使用：<i class="iconfont iconicon_jinru"></i>,这里使用Font class格式 引入在线文件 a. 查看项目在线链接。 b. 在global.
在原生项目和VUE中使用iconfont图标
qq_46160082的博客
12-30 483
经过测试得出以下成功步骤： 1.在官网创建项目，添加自己的图标，下载到本地（后面有新的图标可以直接下载文件进行覆盖即可） 2.在网页中引入iconfont.css（起作用的实际上是@face文件） 3.最简洁的引入方式Unicode编码方式 4.书写格式： <span class="iconfont">&#xe625;</span> <span class="iconfont">&#xe61b;</span> 5.可以在style
项目引入iconfont
weixin_43443325的博客
08-02 84
先下载到本地，然后选择 如图四个选项和iconfont.css到项目的静态资源文件夹即可，
iconfont小图标从下载到引入到vue项目中的详细教程
YY的博客
12-02 1912
iconfont小图标从下载到引入到vue项目中的详细教程
vue项目正确引入iconfont详细操作
iaz999的博客
03-21 2601
引入iconfont的注意事项
vue前端项目引入iconfont阿里图标的四种方式
热门推荐
qq_35430000的博客
02-12 2万+
一、首先登陆阿里云矢量图标库，把需要的字体图标加入到自己的项目中 http://www.iconfont.cn/home/index 二、阿里云图标的四种方式（推荐第二种方式Font class引入，如果不考虑网络问题可以用在线引入的方式） 进入项目以后会看到阿里云可以选择三种方式进行导入图标 （1）unicode unicode的主要的特点是 优势 ①兼容性最好，支持ie6...
vue 使用iconfont
最新发布
09-10
Vue可以使用iconfont来显示图标。有几种不同的方式可以实现这个功能。一种方式是使用unicode码表示图标，这种方式比较不友好，需要去iconfont项目查询unicode码并在代码中使用。另一种更友好的方式是使用类似于font-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值