Angular 中使用 Font Awesome图标

╰+哭是因爲堅強的太久メ 2023-06-08 06:50 86阅读 0赞

# Font Awesome是一个非常强大的图标插件，这篇文章就是讲解我在项目中怎么使用它 #

# 环境 #

Angular 8

# npm导入 #

*  cnpm install @fortawesome/fontawesome-svg-core
 *  cnpm install @fortawesome/free-solid-svg-icons
 *  cnpm install @fortawesome/angular-fontawesome@<^0.5.2>

# 在AppModule中引入 #

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

在import中导入  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70]  
在需要使用的地方引入需要使用的图标  
举两个例子  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 2]  
在组建中引入  
![在这里插入图片描述][20191017161306299.png]  
![在这里插入图片描述][20191017161327367.png]

# HTML页面 #

![在这里插入图片描述][20191017161359267.png]  
就可以在页面显示了

再来一个，可以对比的进行  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][20191017161526851.png]  
好了，完成

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70]: /images/20230531/408de068af77477d94862eb4fc007909.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 1]: /images/20230531/4cd3029295c14f4ab9e3e523e816d7de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 2]: /images/20230531/e226fa72e29c40d6a51ec6ac08e04bc8.png
[20191017161306299.png]: /images/20230531/f5df0e2d2f6c492ab77b4368c871d82f.png
[20191017161327367.png]: /images/20230531/4aef5747c3304a36acf9e3df7d8a05de.png
[20191017161359267.png]: /images/20230531/99b2cdffafb844428ebbe718ba98654b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 3]: /images/20230531/5b2065bc096a4a67bb7de9a5b194d3b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 4]: /images/20230531/f1fa7d1a31bc403ca2d949718b80402b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 5]: /images/20230531/1468ef6770fd4edcb9063ddaeb5e847e.png
[20191017161526851.png]: /images/20230531/bfccf67ca70c4566ae5796294992cddb.png