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

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. 从0到1,教你实现基于Ruby的watir-webdriver自动化测试

    一.为什么选择Ruby []完全开源. []多平台:Ruby可以运行在Linux, UNIX, Windows, MS-DOS, BeOS, OS/.. []多线程:线程就是指在一个程序中处理若干控制 ...

  2. django internal search

    最近改进了项目中的站内搜索的功能,增加了全文索引,提升了搜索速度.因为项目框架是django,所以采用django+haystack+pyelasticsearch+elasticsearch的方式实 ...

  3. web标准

    仔细看看所有的前端招聘要求,几乎所有的都要求对web标准有深刻的理解. web标准,是一系列标准的集合.对前端来说,因为网页是由结构.表现和行为组成.对应的就有结构化标准语言,主要包括XHTML和XM ...

  4. CodeForces 558E(计数排序+线段树优化)

    题意:一个长度为n的字符串(只包含26个小字母)有q次操作 对于每次操作 给一个区间 和k k为1把该区间的字符不降序排序 k为0把该区间的字符不升序排序 求q次操作后所得字符串 思路: 该题数据规模 ...

  5. 关于使用vss版本管理工具中的sln,suo文件作用

    Visual Studio.NET采用两种文件类型(.sln和.suo)来存储特定于解决方案的设置,它们总称为解决方案文件.为解决方案资源管理器提供显示管理文件的图形接口所需的信息 从而在每次继续开发 ...

  6. bzoj 4518: [Sdoi2016]征途

    Description Pine开始了从S地到T地的征途. 从S地到T地的路可以划分成n段,相邻两段路的分界点设有休息站. Pine计划用m天到达T地.除第m天外,每一天晚上Pine都必须在休息站过夜 ...

  7. Android初级教程:ViewPage使用详解

    转载本博客,请注明出处:http://blog.csdn.net/qq_32059827点击打开链接 ViewPage使用之一就是轮播广告,就以此为出发点,来详细解析一下ViewPage的使用和加载机 ...

  8. JDBC学习DayOne

    一.相关概念 1.JDBC的定义 JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它 ...

  9. 26、jQuery

    一. jQuery简介 (一) jQuery是什么: 是一个javascript代码仓库 是一个快速的简洁的javascript框架,可以简化查询DOM对象.处理事件.制作动画.处理Ajax交互过程. ...

  10. 使用Spring Boot开发 “Hello World” Web应用

    环境准备 由于现在很多IDE都支持Maven, 所以我们将使用Maven构建该工程: 开始之前,需要先安装Java和Maven: 本工程将基于Spring Boot 1.4.3.RELEASE开发,推 ...