Angular 5 i Font-Awesome

Jedną z możliwości integracji font-awesome z Angular jest użycie gotowych paczek z repozytoriów npm. Przegląd kilku – oraz szybki rzut oka na datę publikacji ostatnich zmian w tych paczkach wyłonił `angular-font-awesome’. I o ile instrukcja instalacji dostępna jest na stronie repozytorium tej paczki – nie jestem zwolennikiem ponownego szukania samej nazwy paczki ani jak jej użyć.

Dla porządku tworzymy sobie czysty projekt w Angularze:


ng new ng5FaB

view raw

ng5FaB.start.sh

hosted with ❤ by GitHub

Instalujemy wybrane przez nas paczki (jako, że jestem zwolennikiem yarna to tego będę używał):


yarn add font-awesome angular-font-awesome

yarn add od razu załatwi nam sprawę dodania tych paczek z odpowiednimi wersjami do pliku package.json.

Dodajemy odpowiednie importy w pliku app.module.js:


//…
import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
//…
imports: [
//…
AngularFontAwesomeModule
],
//…
})
export class AppModule { }

oraz ładujemy style globalnie dla całej aplikacji w pliku .angular-cli.json w sekcji styles:


"styles": [
"../node_modules/font-awesome/css/font-awesome.css",
"styles.css"
],

view raw

ng5FaB.css.json

hosted with ❤ by GitHub

I to już wszystko – powinniśmy mieć możliwość korzystania z ikonek font-awesome w naszej aplikacji wrzucając do szablonu, przykładowo:


<fa name="chrome" animation="spin" size="5x"></fa>

Bonus: Bulma CSS Framework

Wartym uwagi jest niewielki framework CSS – Bulma. Instalujemy odpowiednią paczkę (oczywiście nie jest to jedyny sposób instalacji):


yarn add bulma

view raw

ng5FaB.bulma.sh

hosted with ❤ by GitHub

W pliku .angular-cli.json dodajemy odpowiednią referencję do pliku CSS naszego frameworka, aby był dostępny globalnie w całej aplikacji:


"styles": [
"../node_modules/font-awesome/css/font-awesome.css",
"../node_modules/bulma/css/bulma.css",
"styles.css"
],

I oczywiście aby zobaczyć, czy wszystko działa, uzupełniamy np.: app.component.html przykładowym szablonem:


<p style="text-align: center; color: #0bb5ff">
<a href="https://fontawesome.com/"><fa name="chrome" animation="spin" size="5x"></fa></a>
</p>
<p style="text-align: center; margin-top: 15px">
<a href="https://bulma.io/" class="button is-success">Bulma is here</a>
</p>

Uruchamiamy serwer i weryfikujemy w przeglądarce, czy wszystko śmiga.

Całość kodu źródłowego dostępna jest też w repozytorium NG5-FontAwesome-Bulma-Boilerplate. Klonujemy (git clone git@github.com:filipgorczynski/NG5-FontAwesome-Bulma-Boilerplate.git), przechodzimy do katalogu projektu (cd NG5-FontAwesome-Bulma-Boilerplate), odpalamy yarn aby zainstalować zależności z package.json i startujemy serwer (ng serve).

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj /  Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj /  Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj /  Zmień )

Połączenie z %s

Ta witryna wykorzystuje usługę Akismet aby zredukować ilość spamu. Dowiedz się w jaki sposób dane w twoich komentarzach są przetwarzane.