Vue 使用 阿里巴巴 iconfont 没有显示问题

最新推荐文章于 2024-04-18 22:42:34 发布
最新推荐文章于 2024-04-18 22:42:34 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： vue html 文章标签： vue html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liulang1905/article/details/117019890
版权
vue 同时被 2 个专栏收录
11 篇文章 0 订阅
订阅专栏
html
6 篇文章 0 订阅
订阅专栏

记录一次小坑，就是可能路径不对，需要放到public下 和 index.html同级就好了

在这里插入图片描述

<!-- 你的具体路径 这段在你的index.xml中引入，这里引入可以全局使用，如果单独页面也可以单独引入-->
<link rel="stylesheet" href="/icons/iconfont.css">

<!-- 下载后的图标的class  -->
<span class="iconfont icon-zhankai"></span>

如果不知道图标的class，可以打开下载后的文件夹里的 demo_index.html查看
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210519105605337.png#pic_center

在这里插入图片描述

liulang1905
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在vue中使用阿里巴巴黑白图标和彩以图标.docx
01-13
在 Vue 中使用阿里巴巴黑白图标和彩色图标 在 Vue 项目中，使用阿里巴巴黑白图标和彩色图标可以为我们的应用程序添加视觉吸引力和丰富的用户体验。阿里巴巴图标库提供了大量的图标资源，包括黑白小图标和彩色图标，...
Vue中使用ElementUI使用第三方图标库iconfont的示例
10-17
主要介绍了Vue中使用ElementUI使用第三方图标库iconfont的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue使用中icon图标失效问题（已解决）
weixin_50433115的博客
12-17 2863
这是因为从ElementPlus@1.20起icon包改名了，站在要用import {图标名字} from '@element-plus/icons-vue'
【iconfont图标】vue引入并使用阿里巴巴iconfont图标流程【uniapp引入iconfont真机APP不显示问题解决，移动端引入报错解决】
seeeeeeeeeee的博客
11-28 4870
为什么要使用阿里图标库： 图标现在是很多地方都会用到的 一般我使用的时候都是直接在ui库中比如elementul自带的一些 有时候哪怕是感觉图标不是非常适合也是用的elementul图标，主要原因是懒 因为能直接复制的，就懒得再去阿里图标库下载遍，差不多就行了。 但是总有些时候你需要的图标是真的在elementul里没有的或者完全不适合的。 这时候我们需要去到阿里的图标库里找找，这里的图标非常多，完全可以满足一切需求了。1，Unicode：兼容性好，ie低版本也好用，可以和文字一样调整颜色和大小。缺点是不显
iconfont图标不显示的解决方式
最新发布
m0_57342122的博客
04-18 989
iconfont图标不显示的解决方式
【VUE】vue引入iconfont不显示
SZnAl的博客
03-03 2912
引入在线iconfont后页面显示方块 解决方法：在app.vue中引入css样式与在线地址后 在要引入iconfont的页面中，引入iconfont的地方，比如在div里放入iconfont代码，给div添加class：class="iconfont"
iconfont阿里图标引入不生效的解决方法,三种引入方式详细步骤。
weixin_46409887的博客
09-28 9815
1.登录阿里图标官网 2.注册自己的账户，创建项目 3.加入自己使用的图标，加入购物车 4.选中项目 5.选中引入方式: 第一种.使用统一码 Unicode 第二种.使用class Font class 使用步骤: 第一种: 1.点击Unicode 2.创建一个css文件(iconfont.css) 粘贴到css文件中 3.html中link引入 <link rel="stylesheet" href="../css/iconfont.css"> 4.使用 <i class=
Vue项目中在线引入icon-font图标字体却不显示的原因
weixin_47140911的博客
07-22 3454
项目中，明明在index.html中引入了在线图标字体（步骤：1.登录https://www.iconfont.cn/，搜索你想要的图标字体并加入购物车；2.点击购物车，将选好的字体添加到项目；3.点击font-class按钮，复制路径；4.在index.html中引入，记得要加http:） <!-- iconfont图标字体库 --> <link rel="stylesheet" href="http://at.alicdn.com/t/font_2693178_7220v.
vue和小程序项目中使用iconfont的方法
01-19
一、vue中使用iconfont 1、百度搜索iconfont或者阿里巴巴矢量图标库官网，注册登录； 2、找到图标管理->新建项目，或者使用已有的项目，用于保存自己的图标； 3、搜索自己需要的icon； 4、添加到购物车中； 5...
微信小程序引用阿里巴巴矢量图标.zip
09-04
首先，阿里巴巴矢量图标库（IconFont）提供了一个庞大的图标资源库，开发者可以从中选择合适的图标并自定义颜色、大小，适用于多种前端项目。在微信小程序中使用这些图标，可以实现轻量级的图标展示，同时避免因图片...
vue element项目引入icon图标的方法
12-07
阿里巴巴图标网站: http://www.iconfont.cn/ 下面具体介绍如何使用 1.注册一个阿里巴巴账号,搜索自己需要的图标,添加到购物车,然后点击添加到项目,如果没有项目就需要创建.   2.点击添加到项目后,选中第二个 ...
初学前端-记使用阿里图库SVG图标不显示的解决方法
zxc1207893278的博客
08-23 1512
使用VUE3+Element-Plus做来制作前端界面，做到左侧菜单栏时遇到了一个困难，添加的SVG图标始终不显示，位置存在，图标的信息也没有问题，但是就是一直显示不出来。的提示在Main.js中导入了inonfont.js文件后正常显示import './assets/fonts/iconfont/iconfont.js'的错误，但是不理解，不知从何下手。原来都是做上位机程序的第一次接触前端这种，感觉着实有些吃力，还有继续努力呀。其实在调试时浏览器中也报了。
iconfont-阿里巴巴矢量图标在界面中无法正常显示，表现为一个方块。
记录和分享属于我的“IT”时光
04-11 6734
confont-阿里巴巴矢量图标在界面中无法正常显示，表现为一个方块。
vue项目打包成app，在ios端iconfont 部分字体图标不显示
no pains,no gains
12-15 2901
vue项目打包成app，在ios端字体图标不显示的问题
后端/vue-cli3打包后element-ui icon不显示
qq_18188377的博客
06-18 1030
问题图片：
vue-cli打包apk iconfont字体图标 不显示问题
lq099526的专栏
06-27 491
vue移动端项目打包apk，发现iconfont字体图标不显示，第一反应是引用的文件路径不对；在网上查找资料后，解决方法：找到build>utils.js文件，如图所示位置加上publicPath: '../../' 即可。 再次打包之后，字体图标就显示啦！...
vue引入iconfont阿里字体图标库报错和解决
weixin_47553901的博客
07-14 1606
解决：在引入的字体iconfont.css中加入绝对路径 内容：如图
关于iconfont图标在页面中不生效的问题
m0_55411748的博客
09-14 2087
关于iconfont图标在页面中不生效的问题
iconfont 图标不显示
weixin_48327767的博客
09-19 1157
vue项目中需要用到自定义图标之前一直都是通过引入静态样式文件实现最近用了一个新方式。
vue使用阿里巴巴矢量图
10-12
要在Vue中使用阿里巴巴矢量图，可以使用阿里巴巴的Iconfont图标库。具体步骤如下： 1. 在Iconfont官网上选择需要的图标，加入购物车并下载至本地。 2. 解压下载的文件，将其中的iconfont.ttf文件复制到项目的src/assets/fonts目录下。 3. 在项目的index.html文件中引入iconfont.ttf文件，代码如下： ```html <style> @font-face { font-family: 'iconfont'; src: url('./assets/fonts/iconfont.ttf') format('truetype'); } .iconfont { font-family: 'iconfont' !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> ``` 4. 在需要使用图标的组件中，使用以下代码引入图标： ```html <template> <div> <span class="iconfont"></span> </div> </template> <style> .iconfont { font-size: 20px; color: #333; } </style> ``` 其中，``是图标对应的Unicode编码。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值