unicode引用

第一步：拷贝项目下面生成的font-face

第二步：定义使用iconfont的样式

第三步：挑选相应图标并获取字体编码，应用于页面

实践中遇到的错误

错误1：

路径引入错误

解决方法

错误2：

引用了非自己下载的文件包内容。

三种解决方法

unicode引用

第一步：拷贝项目下面生成的font-face

@font-face {font-family: 'iconfont';src: url('iconfont.eot');src: url('iconfont.eot?#iefix') format('embedded-opentype'),url('iconfont.woff') format('woff'),url('iconfont.ttf') format('truetype'),url('iconfont.svg#iconfont') format('svg');
}

第二步：定义使用iconfont的样式

.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}

第三步：挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#xe661;</i>

实践中遇到的错误

错误1：

路径引入错误

解决方法

检查自己的路径是否正确。

以我的为例。我是在main.js里面引入一个总的文件，这样其他的各个页面都可以直接引用。

再来，我的文件结构如下：

在源文件中默认的引入方式是以下这样的。

@font-face {font-family: 'iconfont';src: url('iconfont.eot');src: url('iconfont.eot?#iefix') format('embedded-opentype'),url('iconfont.woff') format('woff'),url('iconfont.ttf') format('truetype'),url('iconfont.svg#iconfont') format('svg');
}

在iconfont上下载的文件包引入方式如下：

@font-face {font-family: "iconfont";src: url('iconfont.eot?t=1563802172230'); /* IE9 */src: url('iconfont.eot?t=1563802172230#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANIAAsAAAAABzwAAAL7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqBeIFzATYCJAMQCwoABCAFhG0HRRtiBsgekiRFwm7iAQU4TABCPHyN/f7c3UU1qUaG6tNJJJJJI3olQStkEiWYfi3h/al7fQFiXTZibg2Sv2OQT5bLOAHjDEhjtg4Lw0RuXguYDqa/OJw2xedblssc43xMwMDSgMZeZAWSoLeoV2mgvmwzgXp9MrmtNHcOgq8i7BWII1URwLfjUBQRrhWqJyYWcaNKbbpKzwBcF9+P/5AfviRVWThwdadJhtpfE7NHPVZULmE9Q2Bep4OYRsYMUIi9ScMGjyoww0O9a+5pDqhVK3FVjTB79H+FqPgwPfrLIwmZqBamNoJZEsz8mkjIJH4JZIJfR1Nk+CGi2iq0AOxSbM/RSYhuw104fPfjyIcPw+/eDb5/P7T5Y8/Qjs3nVooD7scpGqbixxqbosnOlTHKrs1nVkTKeMeK03OuX07DZzZnKOeuFldY/g8fXs1ZDq35xPPX46k3f/3qeSKiZlEnPFpX5FbMNNwQnxr3a9NGjxu37hsIleg2emxoaCkNN4C3ms7cHdwTvwdrzyQ25NKT6yNqp2EDLDpJfbk1a0IzgA5dcikfLIDKTY/bHnVF91vZMy8AkO/dl0D/Nz62NI7NCam8LwU8THytxPbKTU84xgQhczMT1syNJcVjh8pSLCdh+KZi6LAvoT5SA+EI7X5cIera7CPUdpgCkhq9kNUaQRbsDFRpMAvVas1DvWkt0xt0YDxEqcOUtQhCq0uQNLuDrNVzZMF+hyrdfkK11vCAemsRsWCDsVD9GxgWOJaRuBCpEjVJrOb+ZXo/VhxdYG12gRvGzFbdKC87tx9uwSZmVwyx5yn5nBNEGDVQM9oO6zpFFqMzWOLZLs6t8pwcMvWmbIka4G8Zgwk4TIaIFkJUEspEsuqc/+Dz/TCFQydgCxkd5TCMsan1I3my5W5AtgjMTRm/co1tHkU+jiMQgqEMSDNqh+l0FGJNt5uBSbhsrgM+S7mcqBLZKsh+XmQAkC5yCF9SIkWOElWqj6ljO9SbCKbLUf1kOt/MIqquAwAA') format('woff2'),url('iconfont.woff?t=1563802172230') format('woff'),url('iconfont.ttf?t=1563802172230') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url('iconfont.svg?t=1563802172230#iconfont') format('svg'); /* iOS 4.1- */
}

因为iconfont原来生成的文件包下是同级文件，在我这里是上一层的iconfont文件夹内放入四个有关iconfont的字体文件，因此我这里的路径需要改成以下

这样就引入正确了。

错误2：

引用了非自己下载的文件包内容。

当引用了他人的引用地址，在前面的地址引用无误的前提下呈现的结果就会是下面这种情况

三种解决方法

第一种是：unicode是由iconfont内生成的，因此不同的icon对应的unicode就会不同（毕竟icon很多都长一个样），所以避免不出错误的话，还是用自己下载下来的iconfont.css引用代码保证一致性。

第二种：正确使用对方生成的unicode

第三种：填入不带任何键值或者限制的URL

@font-face {font-family: 'iconfont';src: url('./iconfont/iconfont.eot');src: url('./iconfont/iconfont.eot?#iefix') format('embedded-opentype'),url('./iconfont/iconfont.woff') format('woff'),url('./iconfont/iconfont.ttf') format('truetype'),url('./iconfont/iconfont.svg#iconfont') format('svg');
}

如果以上都不可以解决，还有一种方法，可直接使用，在路径无错误的情况下，直接引入标签法

在vue文件中使用对应的class属性值即可。

 <i class="iconfont iconsousuo"></i>

【Vue.js】iconfont中unicode引用和unicode引用失败，无法显示icon相关推荐

Vue.js项目中,当图片无法显示时则显示默认图片
Vue.js项目中,当图片无法显示时则显示默认图片使用onerror方法最近在学习Vue时,遇到了一个问题,就是从后台传过来的图片路径无效时,需要在页面显示默认图片本人试了3种方法,2种方法失败了 ...
在 Nuxt.js 和 Vue.js 项目中引入第三方字体或艺术字
一.需求分析在我们写前端页面的时候,大部分时候是不需要用到第三方字体的,但如果是面向C端的页面,比如宣传页,就有可能会引入第三方字体,主要还是看UI设计师咋想了,此时我们可以通过让UI将特殊字体切成 ...
Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案
1.需求介绍: 以下介绍一下实现起来没什么疑问的需求:设备列表为一个主页,点击设备列表中的编辑按钮,进入设备信息主页面,默认打开设备配置页,点击设备状态.设备日志.固件升级,会切换下方内容. 本人对以 ...
多个html如何套用套一个头部,Vue.js项目中管理每个页面的头部标签的两种方法...
在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title ,我们只能去修改 index.html 模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title ...
vue.js项目中，关于element-ui完整引入、按需引入的介绍
element-ui引入方式,简单说来有两种:完整引入.按需引入首先谈一下npm安装element-ui的方法: cmd到项目目录,然后执行cmd命令:npm i element-ui -S稍等片刻 ...
Vue.js - 解决部署到服务器后Element UI图标不显示问题（404错误）
1,问题描述 (1)element-ui 自带了一套常用的图标集合,使用起来十分方便.最近发现当 Vue.js 项目中使用 element-ui 图标时,如果使用 npm run dev 方式启动,图 ...
Vue.js组件中v-model的使用
在 Vue.js 中,经常会使用 v-model 实现表单的双向数据绑定功能. 使用 Element 组件时,组件库中的含有输出类型的自定义组件,都会使用v-model指令,该指令绑定的元素就是组件的 ...
vue.js项目中配置mapbox可视化地图api
1. 本地创建vue.js项目 cmd或者terminal中运行下面的命令开出vue project manager,之后按照所需要配置创建vue.js项目 vue ui 2. 在mapbox官网上申 ...
layui中从上一个js模块中取参数_layui的引用js踩坑
前言: 今天因为项目需要,需要使用layui,因为本身不多的前端经验,以为layui的用法和其他的前端框架,例如jquery,bootstrap等等,只需要直接引入layui.js,和layui.cs ...
VUE.js项目中控制台报错： Uncaught (in promise) NavigationDuplicated解决方法
问题愿意:依赖包中vue-router出现问题(猜测为版本问题): 解决方法:在项目目录下运行 npm i vue-router@3.0 -S 这条指令就可以解决了.(更换版本) 或者在main.js ...

【Vue.js】iconfont中unicode引用和unicode引用失败，无法显示icon

unicode引用

第一步：拷贝项目下面生成的font-face

第二步：定义使用iconfont的样式

第三步：挑选相应图标并获取字体编码，应用于页面

实践中遇到的错误

错误1：

路径引入错误

解决方法

错误2：

引用了非自己下载的文件包内容。

三种解决方法

【Vue.js】iconfont中unicode引用和unicode引用失败，无法显示icon相关推荐

最新文章

热门文章