通常外部字体图标都在使用 iconfont ,这种图标在网上搜到一大把都是由于路径问题显示不出来,或者是显示个方块。

最近的项目中也碰到这个坑爸的问题,总结一下解决办法:

  1. 和 webpack.config 配置没有多大关系,按照 vue-cli 生成的  webpack.base.conf.js 这个文件不需要改动,保持原来就好
  2. 将 icon 文件与 icon 样式文件 置于同一目录下放在 assets 目录下即可
  3. 在 main.js 中 通过 import 引入,路径以 ./assets/ 为开始
  • 置于同一目录下放在 assets 目录下

@font-face {
font-family: 'icon';
src: url('icon.eot?btu5gk');
src: url('icon.eot?btu5gk#iefix') format('embedded-opentype'),
url('icon.ttf?btu5gk') format('truetype'),
url('icon.woff?btu5gk') format('woff'),
url('icon.svg?btu5gk#icon') format('svg');
font-weight: normal;
font-style: normal;
}
  •  main.js 中 通过 import 引入
import './assets/fonts/fonts.css'

最终显示效果为:

vue 外部字体图标使用,无须绝对路径引入办法的更多相关文章

  1. javascript中外部js文件取得自身完整路径得办法

    原文:javascript中外部js文件取得自身完整路径得办法 有时候我们需要引入一个外部js文件,这个js文件又需要用到自己的路径或者是所在的目录,别问怎么又这么变态的需求,开发做久了各种奇葩需求也 ...

  2. Spring Boot使用layui的字体图标时无法正常显示 解决办法

    在html文件使用字体图标并且预览时正常,但是启动工程后显示不正常,浏览器调试界面显示字体文件无法decode: Failed to decode downloaded font: xxxxx 如图所 ...

  3. vue使用字体图标转码问题

    使用iconfont字体之后,出现的是一个方框,而没有出现相应的图标 需要通过String.fromCharCode方法转成指定unicode编码对应的十六进制字符 <div class=&qu ...

  4. VUE引入字体图标库

    1. 下载阿里图标 2. 解压文件,并复制文件到VUE项目内 3. 找到添加的字体图标的.css文件,将.iconfont改成[class^="iconfont"], [class ...

  5. vue项目打包部署elementUI的字体图标丢失问题

    自己搭建的Vue项目,没有使用vue-cli,引入elementUI时,使用的是webpack直接打包工具,发现字体图标丢失你 记录一下解决办法: webpack module配置:(build目录下 ...

  6. iconfont.cn阿里巴巴矢量图下载字体图标实战

    1.阿里巴巴矢量图网址:www.iconfont.cn 2.然后用新浪微博账号登录 3.输入要查找的图标相应的关键字,回车 4.滑过要找的图标,点击购物车,让图标存储到暂存架中 5.点击暂存架,存储为 ...

  7. 使用iconfont管理项目中的字体图标

    先来说说字体图标的好处: 很容易任意地缩放: 很容易地改变颜色: 很容易地产生阴影: 可以拥有透明效果: 一般来说,有先进的浏览器支持: 可以使用CSS来装饰(可以得到CSS很好支持): 可以快速转化 ...

  8. 扩展layui中的自带字体图标

    项目中,虽然layui的字体图标库中已经有了1000多个图标了,但是也有时候不能满足我们自定义图标的需求,所以需要进行自定义,具体步骤如下: 1.在iconfont上找到自己喜欢的图标,也可以上传ui ...

  9. vue中引入字体图标报错,找不到字体文件

    在用vue + webpack进行开发的时候,在引用字体图标遇到字体无法加载的问题: 报以下错误 搞了好久没搞定,最后才找到解决方法(还是没有找到原因) 修改字体图标的css中引入字体文件的路径 以前 ...

随机推荐

  1. asp.net core 系列之并发冲突

    本文介绍如何处理多个用户并发更新同一实体(同时)时出现的冲突 . 主要是两种:一种,检查属性并发冲突,使用 [ConcurrencyCheck] ;另一种,检测行的并发冲突,使用 rowversion ...

  2. Dynamics CRM 配置 OAuth 2.0

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复124或者20140324可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 本博文主要参考但不限于如下资料: ...

  3. Windows Server 2016-命令行方式管理Windows服务

    Microsoft Windows 服务(过去称为 NT 服务)允许用户创建可在其自身的 Windows 会话中长时间运行的可执行应用程序. 这些服务可在计算机启动时自动启动,可以暂停和重启,并且不显 ...

  4. 关于项目中ajax 操作 原生项目遇到的问题

    单选框动态赋值 $('input[name=pszt][value='+val+']').attr("checked",true); 置顶的几种方式 window.scrollTo ...

  5. redis缓存类

    <?php class Redis_model{ public $redis = null; public function __construct() { $hosts = $this-> ...

  6. PHP错误:SQLSTATE[HY000] [2054] The server requested authentication method unknown to the client

    使用PHP连接MySQL 8的时候,可能会发生如标题所示的错误: SQLSTATE[HY000] [2054] The server requested authentication method u ...

  7. eShopOnContainers 知多少[1]:总体概览

    引言 在微服务大行其道的今天,Java阵营的Spring Boot.Spring Cloud.Dubbo微服务框架可谓是风水水起,也不得不感慨Java的生态圈的火爆.反观国内.NET阵营,微服务却不愠 ...

  8. CYQ.Data 支持分布式数据库(主从备)高可用及负载调试

    前言: 继上一篇,介绍 CYQ.Data 在分布式缓存上支持高可用,详见:CYQ.Data 对于分布式缓存Redis.MemCache高可用的改进及性能测试 本篇介绍 CYQ.Data 在对数据库层面 ...

  9. 12.22 大湾区.NET Meet 大会

    今年的 Connect(); 主题更加聚焦开发者工具生产力.开源,以及无服务器(Serverless)云服务. Visual Studio 2019 AI 智能加持的 IntelliCode.实时代码 ...

  10. Python:游戏:贪吃蛇原理及代码实现

    一.游戏介绍 贪吃蛇是个非常简单的游戏,适合练手.先来看一下我的游戏截图: 玩法介绍:回车键:开始游戏空格键:暂停 / 继续↑↓←→方向键 或 WSAD 键:控制移动方向. 食物分红.绿.蓝三种,分别 ...