Dans ce tutoriel, nous allons voir étape par étape comment installer Font Awesome dans Laravel.
Nous allons voir deux méthodes pour installer Font awesome dans Laravel qui sont
– Avec NPM,
– Avec CDNJS
Font Awesome est une police d’écriture et un outil d’icônes qui se base sur CSS, LESS et SASS.
Elle a été créée par Dave Gandy afin d’être utilisée avec Bootstrap, et a ensuite été incorporée dans le BootstrapCDN.
Font Awesome détient une part de marché de 20% parmi les sites qui utilisent des scripts de polices tiers sur leur plateforme, ce qui le place en deuxième position après Google Fonts.
Font Awesome 5 est sorti le 7 décembre 2017 avec 1 278 icônes. Cette nouvelle version inclut une version gratuite composée de certains icônes des différentes variantes (Solid, Regular, Light et Brand) ainsi qu’une nouvelle version payante qui regroupe davantage d’icônes. Un abonnement annuel est nécessaire pour bénéficier des icônes Pro3, celui-ci permet de bénéficier des mises à jour et d’un CDN permettant d’inclure facilement les icônes sur son site web.
Installer font Awesome dans Laravel avec NPM
Avant de commencer à installer font awesome dans Laravel avec NPM, nous devons nous assurer d’avoir installer lune version de Laravel et NPM.
Si Laravel n’est pas encore installer sur votre ordinateur, veuillez suivre cet article qui vous montre comment installer Laravel.
Nous devons aussi avoir NPM installé, si c’est pas déjà fait, veuillez sur tutoriel qui vous montre comment installer NodeJs et NPM.
Lire aussi: Comment installer Laravel sur Ubuntu 18.04 LTS
Une fois que Laravel et NPM installés sur votre machine, nous pouvons procéder à l’installation de la librairie Font Awesome à l’aide de la commande NPM suivantes :
npm install font-awesome --save
Une fois l’installation réussie, nous devons importer la police awesome css dans le fichier app.scss, alors importons comme ci-dessous:
resources/sass/app.scss
@import "node_modules/font-awesome/scss/font-awesome.scss";
Pour finir l’installation, nous devons exécuter la commande npm dev :
npm run dev
Ici, nous utiliserons le fichier app.css généré dans notre fichier lame comme ci-dessous:
resources views/welcome.blade.php
<!DOCTYPE html>
<html>
<head>
<title>How to use font awesome in Laravel? - ItSolutionStuff.com</title>
<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
<style type="text/css">
i{
font-size: 50px !important;
padding: 10px;
}
</style>
</head>
<body>
<h1>How to use font awesome in Laravel? - ItSolutionStuff.com</h1>
<i class="fa fa-copy"></i>
<i class="fa fa-save"></i>
<i class="fa fa-trash"></i>
<i class="fa fa-home"></i>
</body>
</html>
Vous pouvez maintenant démarrer votre application et voir sur la page d’accueil. Vous obtiendrez la mise en page comme ci-dessous:
Installer Font Awesome dans Laravel en utilisant CDNJS
Nous avons vu précédemment comment installer Font Awesome en utilisant NPM, ici nous utiliserons le fichier cdnjs pour installer Font awesome dans Laravel.
Alors voyons le code du fichier ci-dessous:
resources/views/welcome.blade.php
<!DOCTYPE html>
<html>
<head>
<title>How to use font awesome in Laravel? - ItSolutionStuff.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/fontawesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" />
<style type="text/css">
i{
font-size: 50px !important;
padding: 10px;
}
</style>
</head>
<body>
<h1>How to use font awesome in Laravel? - ItSolutionStuff.com</h1>
<i class="fa fa-copy"></i>
<i class="fa fa-save"></i>
<i class="fa fa-trash"></i>
<i class="fa fa-home"></i>
</body>
</html>
Comme vous pouvez le voir, l’installation de font awesome avec CDNJS est très simple.
Conclusion
Dans ce tutoriel, nous avons vu comment installer Font Awesome dans Laravel.
Si vous avez des remarques ou suggestions, veuillez laisser un comment en dessous de ce tutoriel.
1 Comment