Nie umiem ładnie

Wszyscy którym brakuje zmysłu artystycznego (ja) korzystają z bootstrapa. Jest on łatwo dostępny (nuget), przyjazny w korzystaniu, w zasadzie każdy nowy projekt tworzony w VS posiada bootstrapa już zainstalowanego i zintegrowanego.

Font awesome

Dla części z nas ikono-grafika dostępna w bootstrapie nie jest wystarczająca sięgamy dalej. Tym dalej, które jest bardzo blisko, jest font awesome:

Coś co bardzo tanim kosztem (0$) oferuje odrobinę artystycznego szaleństwa.  Instalacja jest banalnie prosto idziesz to nugeta, wpisujesz font awesome i czekasz …awesome …font …fontawesome … – szieeeet – nie ma. Twoja mać! Trzeba samemu (leń protestuje). Lekko poirytowany ściągasz zipa, rozpakowujesz i co? css, less, scss, fonts i help-us-out.txt.
Klasyczne rozwiązanie to skopiowanie do content. Ale co? Ale które?

<legendary>It depends</legendary>

Ja u siebie korzystam z sassa, więc ten katalog się przyda, zabieram także fonts – reszta folderów (css lub less)  przyda się w zależności od tego w jaki sposób przygotowujesz u siebie style w aplikacji.

Po wrzuceniu dwóch folderów do innego, nazwanego content. Struktura przedstawia się jakoś tak:

Teraz w moim głównym pliku scss (IsThereAnyNews.scss) robię include do font-awesome.scss

@import “./font-awesome-4.5.0/scss/font-awesome.scss”;

Integracja

Zacieram ręce, bo mam nadzieję że gdy gdzieś w .cshtml napiszę:

<i class=”fa fa-thumbs-up”></i>

Zobaczę coś takiego:

Ale tak nie jest i widzę tylko durne puste kwadraciki. Czego?! F12 pacze, a komputer miauczy że brakuje fontów (.otf, .eot, .svg, .ttf, .woff czy .woff2 – dużo tego). Jak brakuje skoro są! Jak je dodać?!! Czemu nie zostałem drwalem?! Po przeszukaniu znajduje plik o nazwie _variables.scss gdzie widoczna jest ścieżka do $fa-font-path, która pokazuje na zły adres. Poprawiam na:

$fa-font-path:        “/Content/font-awesome-4.5.0/fonts” !default;

Skutkuje:

Gdy wpiszę:

<i class=”fa fa-smile-o”></i>

Efekt

Ot taki długi opis przygody z integracją font awesome z mvc. Przygoda zakończyła się takim oto paskiem pod każdym wpisem rss:

Co dalej z ikonami, o tym następnym razem.