Jeszcze jeden blog o programowaniu

Radosne twórczości leniwego programisty

Posts Tagged ‘angular-font-awesome

Angular 5 i Font-Awesome

leave a comment »

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:

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

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:

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

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

Bonus: Bulma CSS Framework

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

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

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

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

Written by Filip Górczyński

2018.02.07 at 10:49:21

%d blogerów lubi to: