angular+bootstrap+fontawesome 使用

版本介绍：angular7.0x+bootstrap 4.x+fontawesome 0.3.0.

首先在angualr 项目中要使用bootstrap，实际使用的是它的 css，js 两个文件，步骤如下：

一：安装。 ① npm install bootstrap --save

                   ②npm install jquery --save   (可以根据自己的选择是否安装)

安装描述文件③ npm install @types/jquery --save -dev    ④ npm  install @types/bootstrap --save -dev

二：修改配置。在 angular.json  文件中找到  styles ,script,把安装好目录放进去。"style":["src/styles.scss",

"node_modules/bootstrap/dist/css/bootstrap.css",

"node_modules/open-iconic/font/css/open-iconic-bootstrap.css"

],"scripts": [

"node_modules/jquery/dist/jquery.js",

  "node_modules/bootstrap/dist/js/bootstrap.js"

]

如图：

修改路径

到现在为止，你可以在anguar 中使用 jq 和bootstrap了，接下来解决图标问题。因为bootstrap是4.x版本，移除了免费的图标，所以你必须使用单独的图标。当然也可以使用原来的文件复制 加入css，反正我没采用这个，而是用了一个叫 open-ionc的项目，具体的可以百度了解。大概的使用方法是：

1，npm i https://github.com/iconic/open-iconic.git -D；

2，修改路径。也就是上一张图，实际已经写了，如果是在其他的框架可能需要在 index.js中引入：import 'bootstrap/dist/css/bootstrap.css'

import 'open-iconic/font/css/open-iconic-bootstrap.css'

3，修改配置：//处理字体文件

{test:/\.(ttf|eot|svg|woff|woff2|otf)$/, use: 'url-loader'}  因为我是在angular中 我目前还没找到 修改的地方，估计以后会有影响，暂时被我省略了，虽然不影响步骤4.

4，html引用：<span class="oi oi-account-login"></span>

三：但是因为我是在做一个评分的组件，需要使用实心的星星和空心的星星，所以就使用了推荐的fontawesome，感觉也不是很好用，很多东西还是要收费，使用方法记录记录。具体的使用 也可以参考：https://github.com/FortAwesome/angular-fontawesome

里面主要讲的两种引用方式：1，安装：

                                                 $ npm install @fortawesome/fontawesome-svg-core --save

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

                                                 $ npm install @fortawesome/angular-fontawesome --save

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

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

                                                 2，引入：在 app.module 中导入基本模块:

import { FontAwesomeModule }from '@fortawesome/angular-fontawesome'; 第一种方式

接下来是第二种导入：

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

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

import { far,faCalendar }from '@fortawesome/free-regular-svg-icons';

import { faTwitter }from '@fortawesome/free-brands-svg-icons';   

我直接上图吧：

然后在需要使用的组件中使用：

<fa-icon [icon]="['fab', 'twitter']">

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

<fa-icon [icon]="['far', 'calendar']"></fa-icon>

注意点：这里导入的图标名字要加 fa 前缀，并使用 camelCase 命名法。图标库使用参考链接：https://fontawesome.com/icons?d=gallery

其中，经典类型的 也就是实心的 使用的 是，'fas',空心的是：'far'。