iconfont的三种使用方式详解


Posted in Javascript onAugust 05, 2018

在我们项目中经常要使用到iconfont,在此我们使用阿里巴巴矢量库提供的icon图标,此图标库足够为我们提供大量的图标,我们首先需要的事在阿里巴巴矢量图标库新建一个自己的账号,并且新建一个项目,这个项目包含了你所有要用到的图标。我们需要选中需要的图标放到自己的项目中,并下载下来放到自己项目下的iconfont文件夹之下。(需要更新图标时,下载包也需要重新下载更新)

方式一:使用symbol方式(本质是用svg标签构成的)

第一步:为了代码更好的复用,我们封装一个svg-icon组件,代码如下:

<template>
 <svg :class="svgClass" aria-hidden="true">
  <use :xlink:href="iconName" rel="external nofollow" ></use>
 </svg>
</template>
<script>
export default {
 name: 'svg-icon',
 props: {
  iconClass: {
   type: String,
   required: true
  },
  className: {
   type: String
  }
 },
 computed: {
  iconName() {
   return `#icon-${this.iconClass}` // 注意:因为此处绑定的svgClass名已经包含#icon,所以复制symbol名字事不需要名字的前缀了
  },
  svgClass() {
   if (this.className) {
    return 'svg-icon ' + this.className
   } else {
    return 'svg-icon'
   }
  }
 }
}
</script>
<style scoped>
.svg-icon {
 width: 1em;
 height: 1em;
 vertical-align: -0.15em;
 fill: currentColor;
 overflow: hidden;
}
</style>

第二步:在main.js中引入

import '@/assets/icons/iconfont.js' //symbol方式的相关文件
import '@/assets/icons/iconfont.css' // Unicode和fontclass方式的样式包
import SvgIcon from '@/components/SvgIcon' // 使用icon组件
Vue.component('svg-icon', SvgIcon) // 引入全局组件,也可以在局部引入

第三步:使用

在自己需要用到的组件中:

<template>
 <div>
 <!--方式一:使用svg-->
 <svg-icon class="h1" icon-class="iconfontzhizuobiaozhunbduan35"></svg-icon>
 <svg-icon class="h1" icon-class="hekriconshebeidengpao"></svg-icon>
 <!--方式二:使用unicode-->
 <i class="iconfont unicode"></i>
 <i class="iconfont unicode"></i>
 <!--方式三:使用iconfontclass-->
 <span class="iconfont icon-baojingliebiao classicon"></span>
 </div>
</template>
<script>
// import '@/assets/icons/iconfont.css'
</script>
<style>
  .h1{
 width:50px;
 height:50px;
 font-size: 100px;
 }
 .unicode{
 font-size: 30px;
 }
 .classicon{
  /* 可以自定义icon的颜色与大小 */
 font-size: 100px; 
 color:red;
 }
</style>

另外两种使用方式是使用unicode和fontclass方式,如上面的代码所示引入与使用

然后我们谈谈这三种方式的优缺点吧

unicode:

优点:

  • 兼容性最好,支持ie6+
  • 支持按字体的方式去动态调整图标大小,颜色等等

缺点:

  • 不支持多色图标
  • 在不同的设备浏览器字体的渲染会略有差别,在不同的浏览器或系统中对文字的渲染不同,其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响,而且这种影响调整起来较为困难
  • 不直观,看unicode码很难分辨什么图标

fontclass:

  • 兼容性良好,支持ie8+
  • 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。

symbol:

  • 支持多色图标了,不再受单色限制。
  • 支持像字体那样通过font-size,color来调整样式。
  • 支持 ie9+
  • 可利用CSS实现动画。
  • 减少HTTP请求。
  • 矢量,缩放不失真
  • 可以很精细的控制SVG图标的每一部分

综上所述的一些特点,个人比较推荐使用symbol或者fontclass的方式

总结

以上所述是小编给大家介绍的iconfont的三种使用方式,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Opacity.js
Jan 22 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 #Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 #Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 #Javascript
深入理解JavaScript的async/await
Aug 05 #Javascript
js数据类型检测总结
Aug 05 #Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 #Javascript
vue实现简单的MVVM框架
Aug 05 #Javascript
You might like
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
完美的php分页类
2017/10/24 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
pandas数值计算与排序方法
2018/04/12 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
python里dict变成list实例方法
2019/06/26 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
GWebs公司笔试题
2012/05/04 面试题
浙江文明网签名寄语
2014/01/18 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
2015年市场营销工作总结
2015/07/23 职场文书