引用iconfont图标无效，实际是因为全局引入css时位置错误

最新推荐文章于 2023-01-07 16:48:53 发布
最新推荐文章于 2023-01-07 16:48:53 发布
阅读量876 收藏
点赞数 1
分类专栏： css 文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gjylalaland/article/details/127864745
版权

        遇到的一个问题，看了好久才发现，记录一下。

        iconfont引用的教程就跟网上的教程一样，看了半天发现自己的图标不生效，最后看到一个博主说是main.js中全局引入import '@/assets/icon/iconfont.css'时，位置顺序错误，才导致图标不生效，确实是这个问题，因为项目引用的东西比较多我也不清楚到底是哪里顺序不对，干脆放在element-ui下面的位置引入，我想着这肯定生效的。

        还有个问题就是class名称，一般默认的就是这样格式的<i class="iconfont icon-pdf"></i>

明天不掉发
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目引入Iconfont图标库的教程图解
10-17
主要介绍了vue项目引入Iconfont图标库的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
flutter-iconfont-cli:在flutter中使用iconfont图标，不依赖字体，支持多色彩
05-06
flutter-iconfont-cli 用纯JS把iconfont.cn的图标转换成Flutter Widget，不依赖字体，支持多色彩 特性 1、纯组件，不依赖字体，体积小 2、支持渲染多色彩图标，支持自定义颜色 3、自动化生成图标组件 Step 1 在项目文件pubspec.yml中加入flutter插件 flutter_svg { ... dependencies: # 版本号请以官方库的为准：https://pub.dev/packages/flutter_svg flutter_svg: ^0.19.3 ... } 然后执行flutter插件安装操作 flutter packages get 接着安装全局插件（基于nodeJs） npm install flutter-iconfont-cli -g Step 2 生成配置文件 npx iconfon
vue使用中icon图标失效问题（已解决）
weixin_50433115的博客
12-17 2762
这是因为从[email protected]起icon包改名了，站在要用import {图标名字} from '@element-plus/icons-vue'
Vue引入sass并配置全局变量的方法
08-27
主要介绍了Vue引入sass并配置全局变量的方法
vue项目中全局引入1个.scss文件的问题解决
10-16
主要跟大家介绍了vue项目中全局引入1个.scss文件的问题解决，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Iconfont使用报错踩坑: error in ./src/assets/styles/iconfont/iconfont.svg?t=1554464791200
热门推荐
helloWolrldApe的博客
04-05 1万+
Iconfont使用报错踩坑: error in ./src/assets/styles/iconfont/iconfont.svg?t=1554464791200 不知道有没要遇到过类似的报错： error in ./src/assets/styles/iconfont/iconfont.svg?t=1554464791200 Module build failed: Error: ENOE...
iconfont阿里图标引入不生效的解决方法,三种引入方式详细步骤。
weixin_55054681的博客
01-07 2331
总结:生成的项目必须是base64，如果按照这些步骤引入的，不生效，4.粘贴到一个css文件夹中(iconfont.css)、直接下载到本地,项目中引入iconfont.css即可。2.创建一个css文件(iconfont.css)第二种.使用class Font class。4.重新生成新的文件夹，引入到项目中。3.加入自己使用的图标，加入购物车。第一种.使用统一码 Unicode。1.点击 Font class。2.注册自己的账户，创建项目。3.html中link引入。1.点击Unicode。
关于uni-app App-plus中iconfont图标的引入没效果，博主踩过的坑
梦之所以
05-19 5072
在做项目的时候，我们可能习惯性的会选择font-class类型 然后在线拷贝css文件，添加到项目文件中，结果到了app-plus时，发现还缺少ttf文件的引入 "buttons": [{ "fontSrc": "/static/iconfont.ttf", "text": "\ue66e", "fontSize": "26", "color": "#fff", "float": "left", "backgr
uniapp引用全局样式不生效
10-24 4097
MacOS 使用HBuilder 编辑器 开发uniapp 样式不生效解决办法
vue中引入iconfont
Lval的博客
04-03 2224
vue中引入iconfont 打开 iconFont官网 选择自己喜欢的图标，并且添加购物车 将选好的图标下载到本地,并复制到assets目录下 在main.js中引入文件中的iconfont.css文件 1 import './assets/iconfont/iconfont.css' 然后就可以...
mpvue全局引入sass文件的方法步骤
10-17
主要介绍了mpvue全局引入sass文件的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序 如何引入外部字体库iconfont的图标
11-26
如何引入外部字体库iconfont的图标，具体如下 直接使用阿里巴巴的网络路径 选择iconfont图标 官网：阿里巴巴矢量字体库 步骤：阿里巴巴字体库使用方法 全局引入app.wxss @font-face { font-family: 'iconfont'; /* project id 518032 */ src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot'); src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot?#iefix') for
vue如何引入sass全局变量
12-12
sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，只要修改变量值，编译后所有用到该变量的样式都会被修改为你想要的效果，但是在vue-cli搭建的项目中，在main.js中全局引入一个scss文件，在其中定义变量在其他组件或者页面中引用报变量未定义错误，其他的样式可以正常显示，显然是编译的问题。 傻瓜式引用 在每个用到全局变量的组件都引入该全局样式文件 @import 'path/fileName.scss' 但是组件或者页面不在统一层目录下，引入的路径可能也会有差异，所以还是看看 sass-resources-loader 的解决方法吧。 sass-r
android 7.0/8.0/9.0/10.0全局手势事件无效解决方案
07-29
android 7.0/8.0/9.0/10.0全局手势事件无效,由于设置状态栏或者导航栏高度为0时，会导致全局手势事件滑不出来
全局CSS的设置(基础样式重置)
09-25
全局CSS想必大家并不陌生吧，主要就是一些基础全局的样式设置，提高书写效率，本文整理了一些方便大家使用，感兴趣的朋友可以了解下
iconfont 图标不生效
DRNB666的博客
03-24 1457
在项目设置中，将前缀取消然后正常iconfont (类名)使用即可
uniapp引入iconfont无效的解决
weixin_46732970的博客
10-11 1277
uniapp引入iconfont
iconfont无法使用时的应急解决方案
林中路
06-13 5569
iconfont挂了？那项目如何新增图标？来看看这个解决方案
uni-app项目中，引入iconfont图标没有效果的总结
梦之所以
05-19 4832
实现效果： 发现没有任何效果，于是查看代码发现 自己习惯性的添加了scoped属性，scoped是为了避免其他页面样式命名重复的问题，在App.vue中引入导致其他页面无法使用该页面的样式，从而导致效果无法显示。 效果： ...
vue引用iconfont图标
最新发布
04-22
怎么做？ 可以通过在HTML文件中引入iconfont的在线链接或下载iconfont文件到本地进行引入，并在最外层的HTML页面中设置全局样式，如下所示： 在HTML文件中引入在线链接： ```html <head> <link rel="stylesheet" href="https://at.alicdn.com/t/font_xxxxxxxx.css" /> </head> ``` 或者在本地下载iconfont文件后引入： ```html <head> <link rel="stylesheet" href="iconfont/iconfont.css" /> </head> ``` 设置全局样式： ```css .iconfont { font-family: 'iconfont'; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 使用方法 */ <i class="iconfont">ሴ</i> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值