架构师_程序员

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 677|回复: 0

[Angular] Angular 6引入Font Awesome图标教程

[复制链接]
跳转到指定楼层
楼主
发表于 2019-5-13 15:29:22
Font Awesome是一款非常棒的网页字体图标库,提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

先上效果图:



环境:

Angular CLI: 6.2.4
Node: 8.9.2
OS: win32 x64

教程:

npm安装命令:

  1. npm install --save font-awesome angular-font-awesome
复制代码
C:\project\git\itsvse>npm install --save font-awesome angular-font-awesome
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ font-awesome@4.7.0
+ angular-font-awesome@3.1.2
added 69 packages and updated 1 package in 10.117s

导入模块:

在app.module.ts或者子路由模块里面导入:

  1. import { AngularFontAwesomeModule } from 'angular-font-awesome';
  2. @NgModule({
  3.   //...
  4.   imports: [
  5.     //...
  6.     AngularFontAwesomeModule
  7.   ],
  8.   //...
  9. })
  10. export class AppModule { }
复制代码
引入scss样式表:

angular.json,根据使用的css语法决定引入样式库,如下:

  1. "styles": [
  2.               "src/styles.scss",
  3.               "node_modules/font-awesome/scss/font-awesome.scss"
  4.             ],
复制代码
如果您没有使用CLI,请将样式表导入到您的index.html文件中:

  1. <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
复制代码
(大家直接忽略就行)

使用:

  1. <fa name="cog" animation="spin"></fa>
复制代码
  1. <div class="d-flex">
  2.                       <div class="p-2 flex-fill">https://www.itsvse.com</div>
  3.                       <div class="p-2 flex-fill">
  4.                         <fa name="map" ></fa>
  5.                       </div>
  6.                       <div class="p-2 flex-fill">
  7.                         <fa name="cog" animation="spin"></fa>
  8.                       </div>
  9.                     </div>
  10.                   </div>
复制代码

属性
类型
配置
可选
name
String
F-A Icons
No
size
String
lg, 2x, 3x, 4x, 5x
Yes
fixed
Boolean
true | false
Yes
animation
String
spin | pulse
Yes
rotate
Number | String
90 | 180 | 270 horizontal | vertical
Yes
inverse
Boolean
true | false
Yes

字体图标搜索:https://fontawesome.com/icons

参考资料:https://www.npmjs.com/package/angular-font-awesome




上一篇:HR常用的全套资料
下一篇:Html 500错误页面模板
帖子永久地址: 

架构师_程序员 - 论坛版权1、本主题所有言论和图片纯属会员个人意见,与本论坛立场无关
2、本站所有主题由该帖子作者发表,该帖子作者与架构师_程序员享有帖子相关版权
3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和架构师_程序员的同意
4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
5、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责
6、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意
7、架构师_程序员管理员和版主有权不事先通知发贴者而删除本文

码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

Mail To:help@itsvse.com

QQ|Archiver|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2019-10-21 12:42

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表