如何以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 动态添加表格行 使用模板、标记
Oct 24 Javascript
js保留两位小数使用toFixed实现
Jul 29 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
JS实现很酷的水波文字特效实例
Feb 26 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 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
基于PHP读取csv文件内容的详解
2013/06/18 PHP
php 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
分享15个最受欢迎的Python开源框架
2014/07/13 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
Python中常用的内置方法
2019/01/28 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
欧克利英国官网:Oakley英国
2019/08/24 全球购物
毕业生个人的求职信范文
2013/12/03 职场文书
校庆标语集锦
2014/06/25 职场文书
农村文化活动总结
2014/08/28 职场文书
生产工厂门卫岗位职责
2014/09/26 职场文书
大学生实习证明
2015/06/16 职场文书
如何拟写通知正文?
2019/04/02 职场文书
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript
Win11 引入 Windows 365 云操作系统,适应疫情期间混合办公模式:启动时直接登录、模
2022/04/06 数码科技
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers