Une brève discussion sur la façon d'ajouter et d'utiliser Font Awesome dans Angular

Cet article vous présentera ce qu'est Font Awesome et comment ajouter Font Awesome au projet Angular et utiliser la bibliothèque d'icônes Font Awesome. J'espère que cela sera utile à tout le monde.

Dans cet article, nous verrons comment utiliser Font Awesome dans une application Angular et comment animer et styliser des icônes à l'aide de Font Awesome. [Recommandation de didacticiel connexe : "Tutoriel angulaire"]

Avant d'en discuter davantage, parlons d'abord de ce qu'est Font Awesome.

Font Awesome

Font Awesome est une boîte à outils d'icônes avec plus de 1500 icônes gratuites et très facile à utiliser. Ces icônes sont créées à l'aide de vecteurs évolutifs et héritent des dimensions et des couleurs du CSS lorsqu'elles leur sont appliquées. Cela en fait des icônes de haute qualité qui fonctionnent bien sur n’importe quelle taille d’écran.

Avant la sortie d'Angular 5, les développeurs doivent installer le package Font Awesome et référencer son CSS dans les projets Angular pour l'utiliser.

Mais la sortie d'Angular 5 a facilité l'implémentation de Font Awesome dans nos projets en créant des composants angulaires pour Font Awesome. Grâce à cette fonctionnalité, Font Awesome peut être intégré proprement dans nos projets.

En raison de l'évolutivité des icônes Font Awesome, elles se fondent bien dans le texte. Dans cet article, nous examinerons de plus près l’utilisation de l’animation, de la coloration et du dimensionnement des icônes Font Awesome.

Créer une application de démonstration Angular

Créons une application de démonstration Angular pour ce tutoriel. Ouvrez votre terminal, CD dans le répertoire du projet et exécutez la commande suivante.

Avant d'exécuter cette commande, assurez-vous que Node.js est installé sur votre système ainsi que Angular CLI.

ng new angular-fontawesome复制代码

Installer les dépendances Font Awesome

Pour ceux d'entre vous qui ont déjà un projet, nous pouvons faire un suivi à partir d'ici. Une fois la commande ci-dessus terminée, CD dans le répertoire du projet et installez la commande d'icône Font Awesome suivante.

npm install @fortawesome/angular-fontawesome
npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-brands-svg-icons
npm install @fortawesome/free-regular-svg-icons
npm install @fortawesome/free-solid-svg-icons

# or

yarn add @fortawesome/angular-fontawesome
yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-brands-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-solid-svg-icons

Utiliser les icônes Font Awesome dans les applications Angular

Il y a deux étapes pour utiliser Font Awesome dans les projets Angular. Regardons ces deux points.

1. Comment utiliser les icônes Font Awesome au niveau du composant
2. Comment utiliser la bibliothèque d'icônes Font Awesome

Comment utiliser les icônes Font Awesome au niveau du composant

Cette étape est liée à l'utilisation des icônes Font Awesome au niveau du composant level, ce qui n'est pas une bonne méthode car elle implique d'importer l'icône dans chaque composant nécessitant une icône, mais également d'importer la même icône plusieurs fois.

Nous devons encore examiner comment utiliser les icônes dans un composant, au cas où nous aurions besoin d'utiliser des icônes dans un composant lors de la création d'une application.

Après avoir installé Font Awesome, ouvrez app.module.ts et importez FontAwesomeModule comme indiqué ci-dessous.

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
imports: [
    BrowserModule,
    AppRoutingModule,
    FontAwesomeModule
  ],

Après cela, ouvrez app.component.ts et importez le nom de l'icône que vous souhaitez utiliser. Disons que nous voulons profiter de faCoffee .

import { faCoffee } from '@fortawesome/free-solid-svg-icons';复制代码

Ensuite, nous créons une variable appelée faCoffee et attribuons notre icône importée à cette variable afin qu'elle puisse être utilisée dans app.component.html. Si nous ne le faisons pas, nous ne pouvons pas l'utiliser.

faCoffee = faCoffee;

Maintenant, dans app.component.html , écrivez le code suivant.

<div>
    <fa-icon [icon]="faCoffee"></fa-icon>
</div>

Exécutez cette commande pour servir notre application et vérifiez si notre icône apparaît.

ng serve

Si nous jetons un œil à notre page Web, nous verrons faCoffee affiché à l'écran. Cela indique que l'icône a été installée et importée avec succès.

Comment utiliser la bibliothèque d'icônes Font Awesome

C'est la meilleure façon pour nous d'utiliser Font Awesome dans notre application, surtout lorsque nous voulons l'utiliser dans tous les composants sans réimporter les icônes ou importer une icône plusieurs fois. Voyons comment nous atteignons cet objectif.

Ouvrez app.module.ts et écrivez le code suivant. Après

import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faStar as farStar } from '@fortawesome/free-regular-svg-icons';
import { faStar as fasStar } from '@fortawesome/free-solid-svg-icons';

export class AppModule { 
  constructor(library: FaIconLibrary) {
    library.addIcons(fasStar, farStar);
  }
}

, nous pouvons l'utiliser directement dans app.component.html sans avoir à déclarer une variable et à la transmettre à cette variable avant de l'utiliser.

<div>
    <fa-icon [icon]="[&#39;fas&#39;, &#39;star&#39;]"></fa-icon>
    <fa-icon [icon]="[&#39;far&#39;, &#39;star&#39;]"></fa-icon>
</div>

Si nous chargeons la page Web maintenant, nous verrons l'icône étoile s'afficher.

Styles d'icônes dans Font Awesome

Font Awesome est disponible en quatre styles différents, jetons un coup d'œil aux icônes gratuites – à l'exception des icônes Pro light, qui utilisent le préfixe 'fal' et ont une licence professionnelle.

• 实体图标使用前缀'fas' ，并从以下网站导入：@fortawesome/free-regular-svg-icons
• 普通图标使用前缀'far' ，并从以下网站导入@fortawesome/free-solid-svg-icons
• 品牌图标使用前缀'fab' ，并从以下网站导入。@fortawesome/free-brands-svg-icons

接下来，让我们看看我们还能用Font Awesome图标做什么。

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

让我们来看看我们如何在Angular中不写CSS样式就能改变Font Awesome图标的颜色。

这种方法有助于我们在组件层面上使用图标。然而，当在所有的组件中使用这种方法时，它是没有帮助的，因为它将改变我们项目中所有组件的图标颜色。对于多个组件，我们可以只用一个CSS类或样式属性来改变它一次。

但是，当我们在一个组件层面上工作时，我们可以使用它，因为我们将只在该组件中使用该图标，而不是为它创建一个CSS属性并在CSS文件中设置样式。因此，让我们看看我们如何在Angular项目中做到这一点。默认情况下，下面的图标是black ，我们想把它改成red 。

// from black
<fa-icon [icon]="[&#39;fab&#39;, &#39;angular&#39;]" ></fa-icon>

// to red
<fa-icon
      [icon]="[&#39;fab&#39;, &#39;angular&#39;]"
      [styles]="{ stroke: &#39;red&#39;, color: &#39;red&#39; }"
></fa-icon>

当使用内联造型改变图标颜色和笔画时，我们必须利用fa-icon 属性。

接下来，我们要在Angular中使用内联样式将图标的大小从小到大。要做到这一点，我们必须使用size 属性的fa-icon 。

    <fa-icon
      [icon]="[&#39;fab&#39;, &#39;angular&#39;]"
      [styles]="{ stroke: &#39;red&#39;, color: &#39;red&#39; }"
      size="xs"
    ></fa-icon>

    <fa-icon
      [icon]="[&#39;fab&#39;, &#39;angular&#39;]"
      [styles]="{ stroke: &#39;red&#39;, color: &#39;red&#39; }"
      size="sm"
    ></fa-icon>

    <fa-icon
      [icon]="[&#39;fab&#39;, &#39;angular&#39;]"
      [styles]="{ stroke: &#39;red&#39;, color: &#39;red&#39; }"
      size="lg"
    ></fa-icon>

    <fa-icon
      [icon]="[&#39;fab&#39;, &#39;angular&#39;]"
      [styles]="{ stroke: &#39;red&#39;, color: &#39;red&#39; }"
      size="5x"
    ></fa-icon>

    <fa-icon
      [icon]="[&#39;fab&#39;, &#39;angular&#39;]"
      [styles]="{ stroke: &#39;red&#39;, color: &#39;red&#39; }"
      size="10x"
    ></fa-icon>

默认情况下，Font Awesome图标会继承父容器的大小。它允许它们与我们可能使用的任何文本相匹配，但如果我们不喜欢默认的尺寸，我们必须给它们我们想要的尺寸。

我们使用xs,sm,lg,5x, 和10x 等类。这些类将图标的大小增加和减少到我们想要的程度。

动画化Font Awesome图标

让我们也来看看我们如何在不使用Angular中的CSS或动画库的情况下对Font Awesome图标进行动画。

作为一个开发者，当用户点击一个提交按钮或页面正在加载时，我们可能想显示一个加载器或旋转器的效果，告诉用户有东西正在加载。

我们可以使用Font Awesome图标来达到这个目的。我们不需要导入一个外部的CSS动画库，而只需要在图标标签上添加Font Awesomespin 属性。

这样做可以避免我们下载一个完整的CSS动画库，而最终使用一个旋转的效果或使用关键帧编写一个长的CSS动画。

因此，让我们来看看我们如何通过使用React图标来实现这一点。

<fa-icon
      [icon]="[&#39;fab&#39;, &#39;react&#39;]"
      [styles]="{ stroke: &#39;blue&#39;, color: &#39;blue&#39; }"
      size="10x"
></fa-icon>

我们刚刚导入了React图标，现在我们要对它进行动画处理。在React图标组件上，添加Font Awesomespin loader属性。

<fa-icon
      [icon]="[&#39;fab&#39;, &#39;react&#39;]"
      [styles]="{ stroke: &#39;blue&#39;, color: &#39;rgb(0, 11, 114)&#39; }"
      size="10x"
      [spin]="true"
></fa-icon>

当我们加载网页时，我们会看到React图标在无限地旋转。这是因为我们把spin 属性设置为true 。

总结

在这篇文章中，我们能够看到如何在Angular项目中使用Font Awesome图标，如何添加图标库中的一些基本样式，以及如何对图标进行动画处理。

我们还可以用Font Awesome图标做更多的事情，比如固定宽度图标、旋转图标、Power Transforms和组合两个图标。Font Awesome的教程可以教你更多关于如何在你的项目中使用这些工具。

如果你觉得这篇文章有帮助，请与你的朋友分享。

英文原文地址：https://blog.logrocket.com/how-to-add-font-awesome-angular-project/

更多编程相关知识，请访问：编程视频！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!