Blog Jekyll: Ikony w blogu – klasy CSS i Font Awesome

Ikony to drobny element graficzny interfejsu, który znacząco wpływa na czytelność i estetykę strony.

W tym blogu używam m.in. takich ikon:

• przełącznik motywu jasny / ciemny:
• RSS:
• strona startowa (landing page):
• LinkedIn:
• GitHub:
• ORCID:
• strona wydziałowa:

Opiszę tu trochę jak działają i jak ich używam.

---

Od plików graficznych do ikon CSS

Na początku HTML-a ikony były małymi plikami graficznymi wstawianymi przez <img> (np. .gif, .png). W dawnych aplikacjach Java (25 lat temu) korzystałem ze standardowych ikon dostarczanych z Java Swing (© Sun Microsystems, 2000):

Rys. 1. Pliki graficzne .gif ikon Java Swing, © Sun Microsystems, 2000.

Z czasem pojawiły się inne techniki (CSS, SVG). Jednym z popularnych rozwiązań stał się Font Awesome. Jest to zestaw ikon udostępniany jako font/SVG z odpowiednimi klasami CSS. Ikony są renderowane jak font (albo SVG), a wybór ikony i jej wyglądu sprowadza się do doboru klas CSS.

Pełny zestaw Font Awesome jest płatny (https://fontawesome.com/), ale bardzo wiele ikon dostępnych jest w wersji darmowej.

Czym są „ikony” w Jekyllu (na przykładzie Chirpy)

W motywach Jekylla ikony najczęściej realizuje się przez Font Awesome.

Chirpy ma bibliotekę Font Awesome już podłączoną w layoucie, więc w treści strony wystarczy użyć odpowiednich klas.

W praktyce ikony renderowane są poprzez dodanie odpowiednich klas CSS do elementu <i>.

Przykładowo:

<i class="fab fa-github" aria-hidden="true"></i>

Klasy mają dwa człony:

• fas / far / fab – rodzina/styl ikony:
  • fas → solid (wypełnione)
  • far → regular (outline)
  • fab → brands (logotypy marek)
• fa-github — nazwa ikony.

Ikony wykorzystywane w tym blogu:

<i class="fas fa-adjust text-muted" aria-hidden="true"></i>
<i class="fas fa-rss text-muted" aria-hidden="true"></i>
<i class="fas fa-globe text-muted" aria-hidden="true"></i>
<i class="fab fa-linkedin text-muted" aria-hidden="true"></i>
<i class="fab fa-github text-muted" aria-hidden="true"></i>
<i class="fas fa-id-card text-muted" aria-hidden="true"></i>
<i class="fas fa-landmark text-muted" aria-hidden="true"></i>

---

Skrypt w Pythonie do generowania siatki ikon

Dodałem prosty skrypt w Pythonie, żeby mieć pod ręką nazwy wybranych ikon.

Co robi skrypt:

1. czyta listę klas z pliku tekstowego
2. generuje siatkę ikon w Markdownie
3. zapisuje gotowy plik .md do wklejenia we wpis

Dane wejściowe – nazwy ikon: icons-font-awesome-input.txt.

Plik wyjściowy – markdown do wstawienia: icons-font-awesome-output.md.

Kod Python: icons-generator.py.

---

Przykładowa siatka ikon

Podsumowanie

W Chirpy dodanie ikony sprowadza się do dodania odpowiednich klas CSS do elementu <i>.

Wybieram nazwę ikony → wpisuję klasę CSS → dostaję ikonę na stronie.

Proste → działa → jest fajnie.