Maison > interface Web > js tutoriel > le corps du texte

Comment ouvrir Font-Awesome en utilisant Angular

php中世界最好的语言
Libérer: 2018-06-06 14:59:21
original
2351 Les gens l'ont consulté

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
Copier après la connexion

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
Copier après la connexion

Importez le module de base

// ...
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@NgModule({
 // ...
 imports: [
 // ...
 FontAwesomeModule
 ],
 // ...
})
// ...
Copier après la connexion
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;
}
Copier après la connexion

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>
Copier après la connexion
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';
Copier après la connexion
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';
Copier après la connexion
Ajoutez ensuite les icônes à la bibliothèque :

// import ...
library.add(faCoffee);
// NgModule({...
Copier après la connexion
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';
Copier après la connexion
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';
Copier après la connexion
puis il suffit de l'ajouter dans la bibliothèque :

library.add(fas);
// or
library.add(fas, far);
Copier après la connexion
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>
Copier après la connexion
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>
Copier après la connexion
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>
Copier après la connexion
Largeur fixe :

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" [fixedWidth]="true"></fa-icon>
Copier après la connexion
Bordure :

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" [border]="true"></fa-icon>
Copier après la connexion
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>
Copier après la connexion
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>
Copier après la connexion
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>
Copier après la connexion
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>
Copier après la connexion
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal