angular菜鸟教程,angular能做什么

　　本文向大家介绍什么是字体牛逼，以及在Angular项目中添加字体牛逼和使用字体牛逼图标库的方法。希望对你有帮助。

　　在本文中，我们将研究如何在Angular应用中使用Font Awesome，以及如何使用Font Awesome的图标动画和样式设计。【相关教程推荐：《angular教程》】

　　在继续之前，我们先来说说什么是字体牛逼。

Font Awesome

　　 Font Awesome是一个图标工具包，有1500多个免费图标，使用起来非常方便。这些图标是使用可扩展向量创建的，当应用于它们时，它们继承了CSS的大小和颜色。这使得它们成为高质量的图标，在任何屏幕尺寸下都能很好地工作。

　　在Angular 5发布之前，开发者必须安装Font Awesome包，并在Angular project中引用其CSS，才可以使用。

　　但是Angular 5的发布通过为Font Awesome创建Angular组件，使得在我们的项目中实现Font Awesome变得很容易。有了这个功能，Font Awesome可以干净地集成到我们的项目中。

　　由于字体Awesome icon的可扩展性，可以很好地与文本内联集成。在这篇文章中，我们将进一步探讨如何使用动画，颜色和字体大小真棒图标。

创建一个演示的Angular应用程序

　　让我们为本教程创建一个演示角度应用程序。打开您的终端，CD到项目目录，并运行以下命令。

　　在运行此命令之前，请确保您的系统已经安装了Node.js和Angular CLI。

　　Ng新angular-fontawesome复制代码

安装Font Awesome依赖项

　　对于已经有项目的，可以从这里跟进。以上命令完成后，CD到工程目录下，安装以下字体牛逼图标命令。

　　npm安装@ fortawesome/angular-font awesome

　　NPM install @ fortawesome/font awesome-SVG-core

　　NPM install @ fortawesome/free-brands-SVG-icons

　　NPM install @ fortawesome/free-regular-SVG-icons

　　NPM install @ fortawesome/free-solid-SVG-icons

　　#或者

　　纱线添加@ fortawesome/angular-font awesome

　　纱线添加@ fortawesome/font awesome-SVG-core

　　yarn add @ fortawesome/free-brands-SVG-icons

　　纱线添加@ fortawesome/free-regular-SVG-icons

　　yarn add @ fortawesome/free-solid-SVG-icons

在Angular应用程序中使用Font Awesome图标

　　在Angular project中使用字体awesome有两个步骤。我们来看看这两点。

　　如何在组件级使用Font Awesome图标如何使用Font Awesome图标库

如何在组件层面上使用Font Awesome图标

　　这一步与在组件级使用Font Awesome图标有关，这不是一个好方法，因为它涉及到将图标导入到每个需要图标的组件中，并且多次导入同一个图标。

　　我们仍然需要了解如何在组件中使用图标，以防在构建应用程序时需要在组件中使用图标。

　　安装字体Awesome后，打开app.module.ts，导入FontAwesomeModule，如下图。

　　从“@ fortawesome/angular-font awesome”导入{ FontAwesomeModule }

　　进口：[

　　浏览器模块，

　　合适的模块，

　　FontAwesomeModule

　　]，之后打开app.component.ts，导入想要使用的图标名称。比如我们要用faCoffee。

　　从“@ fortawesome/free-solid-SVG-icons”导入{ faco ffee }；复制代码接下来，我们创建一个名为faCoffee的变量，并将导入的图标赋给这个变量，这样我们就可以在app.component.html使用它了。如果我们不这样做，我们就不能使用它。

　　faCoffee=faCoffee现在，在app.component.html，编写以下代码。

　　差异

　　fa-icon[icon]= faCoffee /fa-icon

　　/div运行此命令为我们的应用程序提供服务，并检查我们的图标是否显示。

　　如果我们看一下我们的网页，我们会看到faCoffee显示在屏幕上。这表示图标已经安装并成功导入。

如何使用Font Awesome图标库

　　这是我们在应用程序中使用字体Awesome的最佳方式，特别是当我们希望在所有组件中使用它而无需重新导入图标或多次导入一个图标时。让我们看看如何实现这个目标。

　　打开app.module.ts并编写以下代码。

　　从“@ fortawesome/angular-font awesome”导入{ faicon library }；

　　从“@ fortawesome/free-regular-SVG-icons”导入{ faStar as farStar }；

　　从“@ fortawesome/free-solid-SVG-icons”导入{ faStar as fasStar }；

　　导出类AppModule {

　　构造函数(库：FaIconLibrary) {

　　library.addIcons(fasStar、farStar)；

　　}

　　}之后，我们可以直接在app.component.html中使用它，而无需在使用它之前声明一个变量并将其传递给该变量。

　　差异

　　fa-icon [icon]=[fas ， star]/fa-icon

　　fa-icon [icon]=[far ， star]/fa-icon

　　/div如果我们现在加载网页，我们将看到显示的星形图标。

Font Awesome中的图标样式

　　字体Awesome有四种不同的风格。让我们来看看免费图标——除了Pro light图标，它使用前缀“fal ”,并拥有专业许可证。

　　实体以 fas 为前缀，从以下网站导入：@ fortawesome/free-regular-SVG-icons普通图标以 far 为前缀，从以下网站导入@ fortawesome/free-solid-SVG-icons以 fab 为前缀，从以下网站导入。@ fortawesome/free-brands-SVG-icons接下来，我们来看看字体牛逼图标还能做什么。

不用写CSS样式就能改变图标的颜色和大小

　　让我们看看如何在不用Angular编写CSS样式的情况下改变字体Awesome图标的颜色。

　　这个方法帮助我们在组件级别使用图标。然而，当在所有组件中使用这个方法时，它并没有什么帮助，因为它会改变我们项目中所有组件的图标颜色。对于多个组件，我们可以只使用一个CSS类或样式属性来更改它一次。

　　但是，当我们在组件级别工作时，我们可以使用它，因为我们将只在该组件中使用图标，而不是为它创建CSS属性并在CSS文件中设置样式。那么，让我们看看如何在Angular project中实现这一点。默认情况下，下面的图标是黑色的，我们想把它改成红色。

　　//从黑色

　　fa-icon [icon]=[fab ， angular] /fa-icon

　　//变为红色

　　fa图标

　　[icon]=[fab ， angular]