在开发前端项目中,字体图标变得越来越常用。一方面因为它比图片使用起来方便,可以像字体一样修改大小和颜色;另一方面是因为它可以减少请求数量,优化前端性能。

iconfont的使用方法很简单,主要由三种引入方式:Unicode, Font Class,Symbol。不会的可以去官网看看:https://www.iconfont.cn/

但是在实际项目中,我们可能会遇到iconfont冲突的问题,简单来说就是某个项目存在多个iconfont资源目录,而且命名没有修改(默认名都是"iconfont")。导致在页面加载时无法确定使用哪个资源目录下的图标,就会显示不出来。

举个我实际项目中的例子(由于浏览器的限制,我使用的是font class方法):在开发项目A时,我在assets目录里,新建一个iconfont文件夹用来存储该项目中需要用到的iconfont资源;由于需求我需要开发一套通用UI组件,考虑到插件的独立性和移植性,我想把该组件与项目解耦,包括资源,方法等。于是我在components目录下新建一个目录componentA,里面由独立的assets,function目录。由于iconfont都是从官网直接下载,没有修改,导致这两个资源的命名都是"iconfont",导致组件中iconfont始终都加载不出来。

原因:字体命名冲突,样式命名冲突,导致字体图标显示不出来。由于两个地方的iconfont.css文件中的字体命名都是"iconfont",而且样式命名也是相同的,导致问题的出现。

解决办法:既然明确了问题的原因,只要修改其中一个文件的命名就好了,如下图。

修改好iconfont.css文件后,引用的地方也需要修改。如下图:

重新运行项目,组件中和项目中的iconfont都可以正常显示。

Vue.js项目中使用iconfont冲突问题解决的更多相关文章

  1. 如何Vue-cli开始使用在Vue.js项目中启动TDD(测试驱动开发)

    通常,使用测试驱动开发(TDD)最困难的部分是开始.你必须下载带有奇怪依赖项的软件包,让测试套件与你的构建系统协同工作,然后你必须弄清楚如何编写一个测试!难怪这么多的开发者在你提起它的时候就开始跑开了 ...

  2. Vue.js项目中,当图片无法显示时则显示默认图片

    使用require将图片进入,写法如下: data: () => ({logo: 'this.src="' + require('../assets/img.png') + '&quo ...

  3. 如何降低Vue.js项目中Webpack打包文件的大小?

    https://blog.csdn.net/maray/article/details/50988500?utm_source=blogxgwz0 import Blur from ‘vux/src/ ...

  4. Vue.js项目中使用 Ajax 和 FormDate 对象上传文件

    let param = new FormData(); param.append("paths", this.ruleForm.uploadPath); param.append( ...

  5. vue.js项目安装

    Vue.js 安装 NPM 方法安装vue.js项目 npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm npm install np ...

  6. vue.js项目构建

    这里构建的vue.js项目依赖node服务器运行. 项目搭建完整步骤: 安装node.js ,转至nodeJs网站http://nodejs.cn/ 下载nodeJs进行安装. 安装完毕检查nodeJ ...

  7. vscode下面开发vue.js项目

    vscode下面开发vue.js项目   https://blog.csdn.net/linzhiqiang0316/article/details/79176651 vscode下面开发vue.js ...

  8. 建立多页面vue.js项目

    介绍 根据需求,我们希望建立一个多页面的vue.js项目,如何改造单页面vue.js项目为多页面项目?跟着我的步伐看下去吧. 1.创建单页面vue.js项目 简单的记录一下创建步骤: --安装cnpm ...

  9. 如何把vue.js项目部署到服务器上

    如何把vue.js项目部署到服务器上面,我用的是tomcat服务器 1-改一下config/index.js文件,如下图,把assetsPublicPath: './', productionSour ...

随机推荐

  1. Golang Testing单元测试指南

    基础 可以通过 go test -h 查看帮助信息. 其基本形式是: go test [build/test flags] [packages] [build/test flags & tes ...

  2. centos systemd占用大量内存

    不知道为什么,我用vmware做测试用,而且是mini版本,没装什么应用,就是php开发环境,lnmp. 在开发时,内存和swap都爆满,composer包无法安装. 网上搜到解决方法: system ...

  3. [Tomcat源码分析] Eclipse中搭建Apache Tomcat源码调试环境

    网上很多文章都推荐使用Ant下载编译,但本地实践中屡屡失败,无法下载. 后来参考 https://blog.csdn.net/xiongyouqiang/article/details/7894107 ...

  4. 查看java程序的指令码

    java程序转化为JVM指令码分析 1.编写java文件(简易示例) /** * @author yew * @date on 2019/12/9 - 15:53 */ public class Ma ...

  5. vue3.0和2.0的区别,Vue-cli3.0于 8月11日正式发布,更快、更小、更易维护、更易于原生、让开发者更轻松

    vue3.0和2.0的区别Vue-cli3.0于 8月11日正式发布,看了下评论,兼容性不是很好,命令有不少变化,不是特别的乐观vue3.0 的发布与 vue2.0 相比,优势主要体现在:更快.更小. ...

  6. Java面向对象之泛型

    主要介绍: 认识泛型 构造方法中使用泛型 设置多个泛型 通配符 泛型接口 泛型方法 泛型数组 一.认识泛型 具体实例如下: package com.huolongluo.newfeatures; /* ...

  7. ajax的jQuery的表单序列化获取参数serialize()

    需要引入jQuery.js才能使用$("form表单的id").serialize()可获取form表单里面所有表单元素的值和name属性值,按顺序拼接成查询字符串格式为name值 ...

  8. Maven+SSM框架,实现单表简单的增删改查

    目录 1.创建web Maven项目 2.创建java源码文件和resources资源文件 3.创建数据库配置文件:jdbc.properties 4.项目总体目录: 5.添加spring配置文件:a ...

  9. 《Linux就该这么学》课堂笔记01 linux初识

    此书作者刘遄(Liu Chuán)从事于Linux运维技术行业,并且在2012年获得红帽工程师RHCE 6版本证书,在2015年初又分别获得红帽工程师RHCE 7版本证书与红帽架构师认证RHCA顶级证 ...

  10. kerberos&LDAP实现免密码登录搭建

    kerberos && openldap 1.install openldap & kerberos server: yum install db4 db4-utils db4 ...