Opis
Ikony dla podserwisów Moja Ostrołęka ze zbioru FontAwesome Pro 5.x + sygnet logotypu oraz ikona smogu, wyselekcjonowane i scalone za pomocą Fontello.com. Użyte czcionki to sekcja "regular" (prefiks "far").
Instalacja
yarn
yarn add mojaostroleka-czcionki
Użycie
Dodać arkusz stylów (zawiera czcionki oraz importuje "Fira Sans z Google Fonts")
W <head>:
<link href="node_modules/mojaostroleka-czcionki/css/mo-icons.css" rel="stylesheet">
Klasy: .mo-icon icon-sport
Przykład: <i class="mo-icon icon-sport" aria-hidden="true"></i>
Przykładowe użycie z bootstrapem 4.1.1.
<div class="container">
<header>
<nav class="navbar navbar-light navbar-expand-lg bg-white p-0 mt-2" id="mo-nawigacja">
<a class="navbar-brand" href="https://zdjecia.moja-ostroleka.pl"><img src="https://zdjecia.moja-ostroleka.pl/images/logo-galeria.png" alt=""></a>
<button class="navbar-toggler collapsed px-0 py-2 border-0" type="button" data-toggle="collapse" data-target="#topmenu" aria-controls="topmenu" aria-expanded="false" aria-label="Zwiń/rozwiń"><i class="mo-icon mo-menu p-1" aria-hidden="true"></i></button>
<div class="navbar-collapse collapse flex-md-column" id="topmenu" aria-expanded="false" style="">
<ul class="navbar-nav ml-auto topmenu">
<li class="nav-item"><a class="nav-link" href="https://www.moja-ostroleka.pl" title="Aktualności"><i class="mo-icon mo-home" aria-hidden="true"></i><span>Aktualności</span></a></li>
<li class="nav-item"><a class="nav-link" href="https://sport.moja-ostroleka.pl" title="Sport"><i class="mo-icon mo-sport" aria-hidden="true"></i><span>Sport</span></a></li>
<li class="nav-item"><a class="nav-link" href="https://ogloszenia.moja-ostroleka.pl" title="Ogłoszenia"><i class="mo-icon mo-ogloszenia" aria-hidden="true"></i><span>Ogłoszenia</span></a></li>
<li class="nav-item"><a class="nav-link" href="https://turystyka.moja-ostroleka.pl" title="Dla turystów"><i class="mo-icon mo-turystyka" aria-hidden="true"></i><span>Dla turystów</span></a></li>
<li class="nav-item"><a class="nav-link" href="https://smog.moja-ostroleka.pl" title="Smog"><i class="mo-icon mo-smog" aria-hidden="true"></i><span>Smog</span></a></li>
<li class="nav-item d-block d-sm-none"><a class="nav-link" href="https://cenypaliw.moja-ostroleka.pl" title="Ceny paliw"><i class="mo-icon icon-cenypaliw" aria-hidden="true"></i><span>Ceny paliw</span></a></li>
<li class="nav-item"><a class="nav-link" href="https://forum.moja-ostroleka.pl" title="Forum"><i class="mo-icon mo-forum" aria-hidden="true"></i><span>Forum</span></a></li>
<li class="nav-item"><a class="nav-link" href="https://zdjecia.moja-ostroleka.pl" title="Zdjęcia"><i class="mo-icon mo-zdjecia" aria-hidden="true"></i><span>Zdjęcia</span></a></li>
<li class="nav-item"><a class="nav-link" href="https://www.moja-ostroleka.pl/wideo.html" title="Wideo"><i class="mo-icon mo-wideo" aria-hidden="true"></i><span>Wideo</span></a></li>
<li class="nav-item"><a class="nav-link" href="https://randki.moja-ostroleka.pl" title="Randki"><i class="mo-icon mo-randki" aria-hidden="true"></i><span>Randki</span></a></li>
<li class="nav-item"><a class="nav-link" href="https://smacznego.moja-ostroleka.pl" title="Smacznego"><i class="mo-icon mo-smacznego" aria-hidden="true"></i><span>Smacznego</span></a></li>
<li class="nav-item"><a class="nav-link" href="https://www.moja-ostroleka.pl/onas,strona.html" title="Redakcja"><i class="mo-icon mo-redakcja" aria-hidden="true"></i><span>Redakcja</span></a></li>
</ul>
<form action="https://szukaj.moja-ostroleka.pl" id="cse-search-box" class="form-inline ml-auto my-2 d-none d-sm-inline">
<div class="input-group">
<input type="hidden" name="cx" value="partner-pub-2499204435098354:5555479941">
<input type="hidden" name="cof" value="FORID:10">
<input type="hidden" name="ie" value="UTF-8">
<input type="text" name="q" size="50" class="form-control bg-white border">
<span class="input-group-btn">
<button class="btn border bg-light text-muted rounded-0 border-left-0" name="sa" type="submit"><i class="mo-icon mo-szukaj"></i> Szukaj</button>
</span>
</div>
</form>
<script src="https://www.google.pl/coop/cse/brand?form=cse-search-box&lang=pl"></script>
</div>
</nav>
</header>
</div>
Należy pamiętać o dodaniu jquery.min.js oraz bootstrap.bundle.min.js.
Dodatkowo na dole strony dodać:
<script>
$(function() {
// ustawianie obecnej subdomeny jako aktywnej
var sub_domain = '.mo-'+location.hostname.split('.')[0];
$(sub_domain).parent().parent().addClass('active');
});
</script>
Licencja
FontAwesome Pro jest płatny.