如何以Angular的姿势打开Font-Awesome详解


Posted in Javascript onApril 22, 2018

前言

本文主要给大家介绍了关于以Angular的姿势打开Font-Awesome的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

环境

  • Angular: v5.2.9
  • Font-Awesome: v5.0.10
  • angular-fontawesome: v0.1.0-9

无须再用传统的 Web Font 方式

以前习惯于 Font-Awesome 的传统方式:页面底部引用一个 font-awesome.min.css 文件,然后在页面中使用 <i class="fa xxx"></i> 放置图标——这在 Angular 里依然可行,不过这并不 Angularish ——我们其实可以用 Angular 模块组件那种方式去实现。写此文时,官网还没有正式上线 Package for Angular, 不过在官方 GitHub 上已经有相关文档教程了,本文以下内容基本遵循该官方文档。

安装 Package

npm 方式:

$ npm install @fortawesome/fontawesome-svg-core --save
$ npm install @fortawesome/free-solid-svg-icons --save
$ npm install @fortawesome/angular-fontawesome --save

其中「free-solid-svg-icons」是经典样式,其他还有「regular」和「light」可选:

$ npm install @fortawesome/free-brands-svg-icons --save
$ npm install @fortawesome/free-regular-svg-icons --save

在 app.module.ts 中导入基本模块

// ...
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
 // ...
 imports: [
 // ...
 FontAwesomeModule
 ],
 // ...
})
// ...

导入后便无须在其他组件中重复导入了。这是以下使用图标方式的基础。

按需使用方式一

在 component 里导入你所需要的图标:

// ...
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

//...
export class AppComponent {
 //...
 myIcon = faCoffee;
}

注意:这里导入的图标名字要加 fa 前缀,并使用 camelCase 命名法。导入后,你便可以在 html 模板中用以下方式使用图标:

<fa-icon [icon]="myIcon"></fa-icon>

注意在 html 模板中要直接使用图标名。图标可在官网图标库查询。

按需使用方式二

第二种按需使用的方式是使用 library, 使用 library 后你就不用再在 component 中导入图标了,一切都在 app.module.ts 中完成:

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';

有了 library 后,接着再添加你需要用的图标:

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

然后把图标加入到 library 里:

// import ...
library.add(faCoffee);
// NgModule({...

这样你就可以在 html 模板中直接使用了。

全套导入

对于一般规模的网站,我还是推荐将图标全部导入,想用什么就用什么,比查找名字一个一个导入方便。全套导入的方式就是用图标包的别称代替图标名:

// Single:
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
// All:
import { fas } from '@fortawesome/free-solid-svg-icons';

其中「fas」的「s」代表的是「free-solid-svg-icons」的「solid」。以此类推,其他样式的导入是:

import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

然后在 library 中添加即可:

library.add(fas);
// or
library.add(fas, far);

添加之后,你就可以在 html 中任意使用图标了。

在 html 模板中的写法

之前的方式:

<fa-icon [icon]="coffee"></fa-icon>
// or
<fa-icon icon="coffee"></fa-icon>

其实是一种简便写法。它默认使用了 fas 样式的图标,如果要 far 或 fab,你需要这样写:

<fa-icon [icon]="['fas', 'coffee']"></fa-icon>

将样式包别称作为前缀填入数组第一个元素。我推荐这种精确的写法。

图标基本特效

Font-Awesome 还有很多很棒的图标特效——可以通过 html 的标签属性实现。这里直接复制文档中一些基础的用法:

旋转与脉搏式转动:

<fa-icon [icon]="['fas', 'spinner']" [spin]="true"></fa-icon>
<fa-icon [icon]="['fas', 'spinner']" [pulse]="true"></fa-icon>

固定宽度:

<fa-icon [icon]="['fas', 'coffee']" [fixedWidth]="true"></fa-icon>

边框:

<fa-icon [icon]="['fas', 'coffee']" [border]="true"></fa-icon>

翻转:

<fa-icon [icon]="['fas', 'coffee']" flip="horizontal"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" flip="vertical"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" flip="both"></fa-icon>

尺寸:

<fa-icon [icon]="['fas', 'coffee']" size="xs"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" size="lg"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" size="6x"></fa-icon>

按角度偏转:

<fa-icon [icon]="['fas', 'coffee']" rotate="90"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" rotate="180"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" rotate="270"></fa-icon>

靠左或靠右排列:

<fa-icon [icon]="['fas', 'coffee']" pull="left"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" pull="right"></fa-icon>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript入门教程 Cookies
Jan 31 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
微信小程序实现文件、图片上传功能
Aug 18 Javascript
请求时token过期自动刷新token操作
Sep 11 Javascript
vue移动端实现下拉刷新
Apr 22 #Javascript
实例讲解Vue.js中router传参
Apr 22 #Javascript
用Vue写一个分页器的示例代码
Apr 22 #Javascript
vue-cli3.0 特性解读
Apr 22 #Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 #Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 #Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 #Javascript
You might like
定义select的边框颜色
2008/04/28 Javascript
jQuery 常见学习网站与参考书
2009/11/09 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
Python实现自动登录百度空间的方法
2017/06/10 Python
创建Django项目图文实例详解
2019/06/06 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
在校学生职业规划范文
2014/01/08 职场文书
广告创意求职信
2014/03/17 职场文书
团拜会策划方案
2014/06/07 职场文书
小学开学标语
2014/07/01 职场文书
2014年学生会工作总结
2014/11/07 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python