Paweł Łukasiewicz
2020-05-20
Paweł Łukasiewicz
2020-05-20
Udostępnij Udostępnij Kontakt
Wprowadzenie

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.

Font Awesome

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: Client-Side Library

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: Pobranie Font Awesome z CDN 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/: Współdzielony Layout w aplikacji ASP.NET Core

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" />
Od tego momentu mamy dostęp do symboli zdefiniowanych w ramach biblioteki.

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>
Rezultatem tak przygotowanego kodu jest poniższy zrzut ekranu: Współdzielony Layout w aplikacji ASP.NET Core