Wiesz czym jest Font Awesome? Jest to jedna z najpopularniejszych bibliotek typu icon fonts, tj. szczególny rodzaj czcionek, która zamiast tradycyjnych liter zawiera symobole. Ich wektorowa reprezentacja pozwala na łatwe powiększanie czy zmienianie koloru tła – nie jest to prosta operacja w przypadku zwykłych ikon.

Skoro jednak trafiłeś na ten wpis zapewne tworzysz jakiś projekt w technologii ASP.NET Core i chcesz wykorzystać tę bibliotekę.

Przechodzimy od razu do konkretów, pomijamy proces tworzenia nowego projektu. W moim przypadku wpis opiera się na ASP.NET Core 3.1.

Bibliotekę dodamy do naszego projektu korzystając z Client-Side Library do której dostęp mamy z poziomu menu kontekstowego dostępnego pod prawym przyciskiem myszy:

Wiesz czym dokładnie jest Client-Side Library? Jest to bardzo intiucyjne narzędzie, która pozwala nam na dostęp do wielu różnych bibliotek. Dzięki niemu możemy pobierać biblioteki takie jak JQuery, Bootstrap, Angular czy React. Tak naprawdę mamy dostęp do ogromnej liczby bibliotek zdefiniowanych w ramach tzw. CDN (Content Distribution Network) - jest to duży, rozproszony system serwerów wdrożony w wielu centrach danych. Samo pojęcie jest niezwykle szerokie i nie będziemy się na nim skupiać w tym wpisie.

Instalując font-awesome wykorzystamy CDN. Z poziomu Client-Side Library mamy również dostęp do innych dostawców bibliotek: mogą to być biblioteki dostępne lokalnie, JSDelivr (pozwala na pobranie bibliotek javascript dostępnych na npm i Github) oraz unpkg, który daje nam dostęp do wszystkich bibliotek znajdujących się na npm (node package manager).

Wróćmy jednak do tematu naszego wpisu. Interesuje nas konkretna biblioteka, którą chcemy pobrać wykorzystując wspomniany powyżej CDN. Po uruchomieniu narzędzia wpisujemy nazwę interesującej nas biblioteki: W powyższym oknie dialogowym możecie zobaczyć jakie pliki zostaną zainstalowane w jakiej lokalizacji. Mamy tutaj oczywiście możliwość pełnej konfiguracji, tzn. możemy wskazać interesujące nas pliki oraz lokalizację instalacji.

Po ukończonej instalacji musimy jeszcze odwołać się do biblioteki z poziomu naszego projektu. Aby mieć dostęp do font-awesome z poziomu każdego widoku wykorzystamy plik _Layout.cshtml dostępy w lokalizacji: /Views/Shared/:

Wewnątrz selektora head dodajemy znacznik link w poniżej postaci (jeżel zdecydowaliśmy się na domyślny folder instalacji):

<link rel="stylesheet" href="~/lib/font-awesome/css/all.css" />

Użycie jest niezwykle intuicyjne a przy wykorzystaniu CSS możemy w prosty sposób zmienić wielkość czy kolor symboli. Spójrzcie na poniższy przykład:

<div class="icons-example">
    <i class="fa fa-car"></i>
    <i class="fa fa-car" style="font-size:2rem"></i>
    <i class="fa fa-car" style="font-size:4rem"></i>
    <i class="fa fa-car" style="font-size:8rem"></i>
    <i class="fa fa-car" style="font-size:16rem"></i>
    <i class="fa fa-car" style="font-size:32rem"></i>

    <hr />

    <i class="fa fa-car-crash" style="font-size:16rem;color:rgb(241,125,128)"></i>
    <i class="fa fa-car-crash" style="font-size:8rem;color:rgb(115,116,149)"></i>
    <i class="fa fa-car-crash" style="font-size:8rem;color:rgb(104,168,173)"></i>
    <i class="fa fa-car-crash" style="font-size:2rem;color:rgb(196,212,175)"></i>
    <i class="fa fa-car-crash" style="font-size:1rem;color:rgb(108,134,114)"></i>
</div>