Explication détaillée des étapes Angular+Font-Awesome

Cette fois, je vais vous apporter une explication détaillée des étapes de Angular+Font-Awesome Quelles sont les précautions lors de l'utilisation d'Angular+Font-Awesome. Voici des cas pratiques, jetons un coup d'œil.

Avant-propos

Cet article vous présente principalement le contenu pertinent sur l'ouverture de Font-Awesome en posture angulaire, et le partage pour votre référence et apprentissage, pas grand chose à dire ci-dessous, jetons un œil à l'introduction détaillée.

Environnement

• Angulaire : v5.2.9

• Police- Génial : v5.0.10

• angular-fontawesome : v0.1.0-9

Pas besoin d'utiliser le Web traditionnel Méthode de police

Avant, j'étais habitué à la méthode traditionnelle de Font-Awesome : le bas de page référence un fichier font-awesome.min.css, puis l'utilise dans la page <i class="fa xxx"></i> Placer des icônes - C'est toujours possible en Angular, mais ce n'est pas Angularish - nous pouvons en fait le faire en utilisant les composants du module Angular. Au moment de la rédaction de cet article, Package for Angular n'a pas été officiellement lancé sur le site officiel, mais il existe déjà des didacticiels de documentation pertinents sur le GitHub officiel. Le contenu suivant de cet article suit essentiellement la documentation officielle.

Installer le Package

Méthode npm :

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

Parmi eux, « free-solid-svg-icons » est le style classique, et il existe des options « régulières » et « légères » :

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

dans l'application.module. Importez le module de base

// ...
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@NgModule({
 // ...
 imports: [
 // ...
 FontAwesomeModule
 ],
 // ...
})
// ...

dans ts Après l'importation, il n'est pas nécessaire de l'importer à plusieurs reprises dans d'autres composants. C'est la base des manières suivantes d'utiliser les icônes.

Méthode d'utilisation à la demande 1

Importez les icônes dont vous avez besoin dans le composant :

// ...
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
//...
export class AppComponent {
 //...
 myIcon = faCoffee;
}

Remarque : Le nom de l'icône importée ici doit être préfixé par fa et utiliser la nomenclature camelCase. Après l'importation, vous pouvez utiliser l'icône dans le modèle html des manières suivantes :

<fa-icon [icon]="myIcon"></fa-icon>

Notez que le nom de l'icône doit être utilisé directement dans le modèle html. Les icônes peuvent être trouvées dans la bibliothèque d'icônes du site officiel .

Deuxième méthode d'utilisation à la demande

La deuxième méthode d'utilisation à la demande consiste à utiliser la bibliothèque. Après avoir utilisé la bibliothèque, vous n'avez plus besoin d'importer des icônes dans. le composant, tout Tout est fait dans app.module.ts :

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

Après avoir la bibliothèque, ajoutez les icônes dont vous avez besoin :

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

Ajoutez ensuite les icônes à la bibliothèque :

// import ...
library.add(faCoffee);
// NgModule({...

De cette façon, vous pouvez l'utiliser directement dans le modèle html.

Importez l'ensemble complet

Pour un site Web de taille moyenne, je recommande quand même d'importer toutes les icônes et d'utiliser ce que vous voulez. C'est plus pratique que de rechercher les icônes. noms et en les important un par un. La méthode d'importation complète consiste à remplacer le nom de l'icône par l'alias du package d'icônes :

// Single:
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
// All:
import { fas } from '@fortawesome/free-solid-svg-icons';

Le "s" dans "fas" représente le "solide" dans "free-solid-svg-icons" . Par analogie, l'importation d'autres styles est :

import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

puis il suffit de l'ajouter dans la bibliothèque :

library.add(fas);
// or
library.add(fas, far);

Après l'avoir ajouté, vous pouvez utiliser les icônes arbitrairement en html.

est écrit dans le modèle html

La manière précédente :

<fa-icon [icon]="coffee"></fa-icon>
// or
<fa-icon icon="coffee"></fa-icon>

est en fait une manière simple d'écrire. Il utilise l'icône de style fas par défaut. Si vous voulez far ou fab, vous devez écrire comme ceci :

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

Remplissez l'alias du package de style comme préfixe dans le premier élément du tableau. Je recommande cette façon précise d’écrire.

Effets spéciaux d'icônes de base

Font-Awesome propose également de nombreux effets spéciaux d'icônes exceptionnels - qui peuvent être obtenus via la balise html attribut. Voici quelques usages de base directement copiés du document :

Rotation et rotation par impulsion :

<fa-icon [icon]="[&#39;fas&#39;, &#39;spinner&#39;]" [spin]="true"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;spinner&#39;]" [pulse]="true"></fa-icon>

Largeur fixe :

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" [fixedWidth]="true"></fa-icon>

Bordure :

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" [border]="true"></fa-icon>

翻转:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" flip="horizontal"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" flip="vertical"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" flip="both"></fa-icon>

尺寸:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" size="xs"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" size="lg"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" size="6x"></fa-icon>

按角度偏转:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" rotate="90"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" rotate="180"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" rotate="270"></fa-icon>

靠左或靠右排列:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" pull="left"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" pull="right"></fa-icon>

总结

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Vue组件实现简单弹窗功能案例详解

swiper操作图片步骤详解

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!