vue使用Font Awesome的方法步骤


Posted in Javascript onFebruary 26, 2019

折腾前言

目前工作主要使用 vue.js 框架进行开发,自己又对 vue 不是那么了解,还是半桶的状态,所以得加紧步伐赶紧熟悉起来,这两天在使用脚手架 vue-cli 创建项目玩耍中,又一直对font-awesome锲而不舍,通过 github 了解到早有大牛搞出了 vue-awesome,因此就开始折腾了……

废话不多说,开搞!

准备工作

这个是作者的 github 地址:飞机

为了演示完整步骤,用脚手架新建个项目

正在创建中…

趁此闲话几句

这种方式使用有个好处就是,你可以自己自定义任何图标,即用 svg 格式输出,然后通过 Icon.register 去注册一个图标,注册方式如下:

如果图标很多的时候,DOM 中可能分散着大量的 svg 标签,这个不知道算不算缺点来着。

Icon.register({
  'chevron-right': {
    'width': 1280,
    'height': 1792,
    'paths': [{
      'd': 'M1107 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z'
    }]
  }
});

chevron-right 这个是该图标的名字,在使用的时候通过

<icon name="chevron-right"></icon> 去使用,至于样式按照正常定义即可。

paths 里面就是图标的绘制 svg 时候的路径信息

安装OK了,进入正题……

准备工作:

安装 vue-awesome

$ npm install vue-awesome --save

这个简单安装完成就OK。

结果预览

从图中看其实图标最后就是个 svg 标签

vue使用Font Awesome的方法步骤

图标存放目录

为了开发方便,新建 src/icons 目录集中存放图标js文件

$ cd src/

$ mkdir icons && cmod

这里 cmod 是 777 权限,由于是用的是虚拟机,所以经常出现权限问题,因此索性直接给 777(仅限本地开发)

icon 组件

下载 Icon.vue 文件

到这里下载 Icon.vue 文件,建议将整个项目 git 下来。

这个组件的作用就是,用来创建 <icon name="your icon name"></icon> 自定义标签。

然后把 Icon.vue 放到 components 目录下(放哪里可以自己决定)

src/icons 创建注册图标文件

这个目录集中放置所有 icon 的注册 js 文件

创建出口文件 index.js 这里面将引入所有图标 js 文件

// src/icons/index.js

import './chevron-right.js';

// ...... 其他需要的图标文件

以右键头图标为例:(chevron-right.js)

import Icon from '../components/Icon.vue';

Icon.register({
  'chevron-right': {
    'width': 1280,
    'height': 1792,
    'paths': [{
      'd': 'M1107 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z'
    }]
  }
});

项目入口 main.js 引用字体库

项目主入口文件 main.js 中引入 vue-awesome 库和 icons/index.js 文件

引入图标组件

import Icon from './components/Icon';

引入图标内容文件

import './icons/index.js';

然后将 Icon 注册成 vue 组件

Vue.component('icon', Icon);

注册完成之后,我们就可以在代码中直接使用 <icon></icon> 标签了

结束

使用步骤还是很简单的,经过上面的步骤之后我们就可以正常使用图标库了

总结下来步骤其实就下面几步

  1. import Icon.vue 组件
  2. new you-icon.js,里面通过 Icon.register 注册图标
  3. 【可选】 新建图标文件出口文件,这个在使用的图标很多的时候比较方便
  4. <icon name="you icon name"></icon> 引用图标
  5. 给图标设置样式(大小可以通过 transform: scale() 来设置)

PS: 直接设置字体,改变不了大小;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
简明json介绍
Sep 28 Javascript
Javascript的闭包
Dec 31 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
AngularJS入门教程之REST和定制服务详解
Aug 19 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
vue生命周期的探索
Apr 03 Javascript
javascript 高级语法之继承的基本使用方法示例
Nov 11 Javascript
5个实用的JavaScript新特性
Jun 16 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 #Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 #Javascript
JS实现电话号码的字母组合算法示例
Feb 26 #Javascript
JS实现的合并两个有序链表算法示例
Feb 25 #Javascript
JS实现判断有效的数独算法示例
Feb 25 #Javascript
js实现通过开始结束控制的计时器
Feb 25 #Javascript
js实现倒计时器自定义时间和暂停
Feb 25 #Javascript
You might like
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
codeigniter框架批量插入数据
2014/01/09 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
php实现的CSS更新类实例
2014/09/22 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
python使用scrapy解析js示例
2014/01/23 Python
Python入门教程之if语句的用法
2015/05/14 Python
Python 获取div标签中的文字实例
2018/12/20 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
Python常用库大全及简要说明
2020/01/17 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
联想德国官网:Lenovo Germany
2018/07/04 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
机关节能减排实施方案
2014/03/17 职场文书
华清池导游词
2015/02/02 职场文书
小学少先队活动总结
2015/05/08 职场文书
经销商会议开幕词
2016/03/04 职场文书
python开发的自动化运维工具ansible详解
2021/08/07 Python