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 相关文章推荐
JavaScript版代码高亮
Jun 26 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
JavaScript中的比较操作符&gt;、=、
Dec 31 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
Javascript中的作用域及块级作用域
Dec 08 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 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的异常处理类Exception的使用及说明
2012/06/13 PHP
浅析51个PHP处理字符串的函数
2013/08/02 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
js option删除代码集合
2008/11/12 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
js控制frameSet示例
2013/09/10 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
JavaScript 基本概念
2015/01/20 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
Python编程之属性和方法实例详解
2015/05/19 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
np.dot()函数的用法详解
2020/01/17 Python
python标准库OS模块详解
2020/03/10 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
python collections模块的使用
2020/10/16 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
乡下人家教学反思
2014/02/01 职场文书
家庭困难证明
2014/10/12 职场文书
学前班学生评语
2014/12/29 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
Python操作CSV格式文件的方法大全
2021/07/15 Python
浅谈Redis缓冲区机制
2022/06/05 Redis