Comment ouvrir Font-Awesome en utilisant Angular

Cette fois, je vais vous montrer comment utiliser Angular pour ouvrir Font-Awesome, et quelles sont les précautions à prendre pour utiliser Angular pour ouvrir Font-Awesome. Ce qui suit est un cas pratique, 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

J'étais habitué à la méthode traditionnelle de Font-Awesome : référez-vous à un fichier font-awesome.min.css en bas de page, puis utilisez <i class="fa xxx"></i> placer l'icône dans la page - 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

où "free-solid- svg-icons" est le style classique, et il existe des options "normales" et "légères" :

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

Importez le module de base

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

Après l'importation, il n'est pas nécessaire de l'importer à nouveau 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 grâce aux attributs de balise HTML. 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>

Retourner :

<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>

Taille :

<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>

Déviation par angle :

<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>

Organiser à gauche ou à droite :

<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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser vue+webpack pour créer un projet (avec code)

Comment utiliser la liaison de données vue.js

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!