vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标

　　iconfont字体图标使用就不多说了，大致是几部：

　　1、在iconfont官网选图标，加入购物车，加入项目，下载到本地，解压

　　2、在项目assets目录新建目录iconfont，用于存放刚才下载解压的代码

　　3、在main.js导入iconfont.css文件

import './assets/iconfont/iconfont.css'

　　4、在代码中使用class="iconfont icon-XXX"就可以使用图标了

　　但是上面的图标都是黑色的，下面介绍如何引入彩色图标：

　　下载代码到本地，打开压缩包后，我们可以看到 demo_symbol.html 打开后显示的是彩色图标

　　注：解压之后可以看到3个demo的html文件，打开可以看到图标样式，和使用方法

　　官方提供的教程：

symbol引用  这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：  支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
兼容性较差，支持 ie9+,及现代浏览器。
浏览器渲染svg的性能一般，还不如png。
使用步骤如下：  第一步：引入项目下面生成的symbol代码：
<script src="./iconfont.js"></script>  第二步：加入通用css代码（引入一次就行）： <style type="text/css"> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> 第三步：挑选相应图标并获取类名，应用于页面： <svg class="icon" aria-hidden="true"> <use xlink:href="#tiebazs-xxx"></use> </svg>

　　1、main.js里面导入：import './assets/iconfont/iconfont.js'

　　2、App.vue加上：

.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}

　　3、使用方式略微不同

<svg class="icon myIconStyle" aria-hidden="true"> 　　<use :xlink:href="'#' + dbIcon[item.type]"></use> </svg>

.myIconStyle{width 40pxheight 40px
}

　　myIconStyle是自定义的样式

　　补充：aria-hidden 的意思

　　图标的可访问性

　　现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden="true" 属性。

　　如果你使用图标是为了表达某些含义（不仅仅是为了装饰用），请确保你所要表达的意思能够通过被辅助设备识别，例如，包含额外的内容并通过 .sr-only 类让其在视觉上表现出隐藏的效果。

　　如果你所创建的组件不包含任何文本内容（例如， <button> 内只包含了一个图标），你应当提供其他的内容来表示这个控件的意图，这样就能让使用辅助设备的用户知道其作用了。这种情况下，你可以为控件添加 aria-label 属相。

vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标相关推荐

在 Nuxt.js 和 Vue.js 项目中引入第三方字体或艺术字
一.需求分析在我们写前端页面的时候,大部分时候是不需要用到第三方字体的,但如果是面向C端的页面,比如宣传页,就有可能会引入第三方字体,主要还是看UI设计师咋想了,此时我们可以通过让UI将特殊字体切成 ...
在Vue中使用icon 字体图标
1.使用线上的阿里iconfont图标库 1.打开 iconFont官网选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至项目 3 生成链接 4在我们的vue项目中,找到index.html ...
uniapp微信小程序引入第三方字体库
前言最近在使用第三方字体库,然后发现使用uniapp做小程序时引入第三方字体库有着挺多坑,收集了一些网上的资料,我大概整理下,防止以后继续踩坑这是uniapp官网的引入字体图标方法字体引入从c ...
引入第三方图标库，并在前台罗列图标
目前在项目中引入一个第三方矢量图标库已经成为了非常常见的需求.这是因为矢量图不仅体积小,而且在放大时不会失真,颜色也可以轻松修改.相比于传统的方式去加载大量的图片(假设你没有用"雪碧图&qu ...
字体图标库icomoon和iconfont使用方法
目录 1.iconmoon.io使用教程 2.iconfont.cn使用教程 3.如何不通过iconfont项目向已有字体图标中添加新的字体图标 1.iconmoon.io使用教程 icomoon是一 ...
在vue中如何使用字体图标(阿里巴巴)
在vue中如何使用字体图标(阿里巴巴) 1.选择需要的图标加入购物车. 2.打开购物车,添加至项目. 3.点击生成在线代码 4.点击下载至本地,放入需要文件夹下,可以放入assets下. 5.在sty ...
Swift 引入第三方字体库
引入第三方字体库为了达到好的效果展现,我们往往会引入第三方字体库,以使我们工程中的字体展示达到最佳,这方面可能对于阅读之类的APP会用到的更多. 在这里也是随便从网上下载的一个字体,名为经典隶书变体 ...
Vue 中引用第三方js总结
vue中引用第三方js总结 By:授客 QQ:1033553122 实践环境 win10 Vue 2.9.6 本文以引用jsmind为例,讲解怎么在vue中引用第三方js类库基础示例 1.把下载好的 ...
element-ui中使用第三方字体
element-ui中使用第三方字体 1.将素材fonts文件夹加到自己定义的放icon的文件夹中(assets)中,在入口文件main.js中导入 import './assets/fonts/ ...
VUE中动态改变字体大小
VUE中动态改变字体大小父组件将自己的数据传递送给子组件展示,子组件监听click操作,emit发送出去,父组件监听通过emit发送的信息,改变控制字体大小的postFontSize,通过style ...

vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标

vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标相关推荐

最新文章

热门文章