pumiko icon Historia zakręconego projektu

Generowanie własnych czcionek-ikon w oparciu o pliki SVG

Dziwnie toczą się moje losy, odkąd przystąpiłam do konkursu #dajsiepoznac. Myślałam, że nauczę się programować, że django, python, backend, tym będę się zajmować, to będzie mnie pochłaniać, a tymczasem rzeczywistość pokazuje, że więcej czasu spędzam z kartką i ołówkiem, w programach graficznych i próbując dobrać obrazki i kolory do stron.

Tym razem dopadła mnie potrzeba posiadania ładnych i wyjątkowych ikon. W poprzednim poście, wspominałam o swoich obawach związanych z tym, że gdy zacznę bawić się zamienianiem ikon, które są w szablonie na swoje własne, to będzie się wszystko psuć. Pisząc to myślałam, że własne ikony wstawię jako obrazki. Jednak już raz doświadczyłam tego, jak obrazek potrafi zniszczyć działający projekt. Walczyłam z tym dostosowując bloga. Nie chciałam powtarzać tamtej przygody, więc szukałam rozwiązania i obejścia problemu. Nie pamiętam nawet jak, ale trafiłam na hasła font awesome, glyphicon oraz icon font, a dalej, po nitce do kłębka doszłam do tego, że takie czcionki można stworzyć samemu. Kolejne wielkie odkrycie, które rzeczywiście ułatwiła pracę.

Nie obyło się jednak bez konieczności doszkolenia się i poznania nowych narzędzi, a i kilka drobnych problemów po drodze się trafiło, o czym przeczytacie poniżej.

Poradniki i przydatne linki

Nie będę tworzyć tutaj poradnika mówiącego o tym jaka jest najlepsza platforma do generowania, składania lub pobierania fontów. Na razie udało mi się skorzystać z dwóch generatorów. Najpierw trafiłam na Fontastic i poradnik do niego na blogu Rafała Tomala. Miałam jednak problem z przygotowaniem ikonki kota, tak żeby program poprawnie ją czytał. Pracowałam zgodnie z instrukcją, jednak cały czas coś było nie tak. Wydaje mi się, że jedyne co robiłam inaczej, to używałam innego programu do grafiki wektorowej. Adobe Illustratora nie posiadam, ale wszystkie te programy powinny mieć podobną funkcjonalność i dawać podobne efekty.

Wspomniany kłopot sprawił, że postanowiłam poszukać narzędzia, które wygeneruje poprawne plik SVG. Podczas poszukiwań przypadkiem natrafiłam na IcoMoon. Jest to program bardzo podobny do Fontastic. Jeśli chodzi o generowanie fontów, to funkcjonalność obu stron jest podobna, ale IcoMoon poprawnie otwierał i pokazywał moją ikonkę. Podjęłam jeszcze kilka prób rozwiązania zagadki, czemu tu działa a tam nie. Chciałam wrócić do Fontastic, bo przypadł mi do gustu bardziej niż IcoMoon. Niestety nie udało mi się nic sensownego zrobić z kotem, więc na tę chwilę zostaje IcoMoon. Na oku mam jeszcze jeden czy dwa programy do sprawdzenia, ponieważ chciałabym znaleźć optymalne rozwiązanie. Niestety teraz nie mam na to czasu, bo praca goni, a kod już się niecierpliwi. Jeśli będziecie szukali czegoś dla siebie, to polecam zacząć od przeglądu narzędzi na Mashable.

Poradnika o tym jak używać generatorów, z którymi miałam do czynienia, też nie napiszę. Tutoriale do Fontastic są podlinkowane powyżej. Jeśli chcielibyście korzystać z IcoMoon to polecam bloga Creative Market oraz SitePoint. Te dwa poradniki pokazują m.in. jak przygotować grafikę i wygenerować plik SVG, żeby program nie miał z nim problemu.

Ikona Pumiko na stronie

Użyłam IconMoon. Pobrałam z niego swój plik SVG jako czcionkę. Można na raz pobierać całe zestawy czcionek, ale na próbę wystarczy jedna “literka”

Pobieranie czcionki z IcoMoon

Z zestawu plików, który otrzymujemy do zaimplementowania naszej czcionki na stronie potrzebujemy tylko pliku style.css i folderu font.

Pliki pobrane z IcoMoon

Pliki te dodałam do repozytorium landing page’a. Czcionki przerzuciłam do istniejącego wcześniej folderu font, a plik style.css zmieniłam na icomoon.css i ulokowałam go w folderze css. Na początek, przez to, że pliki wrzuciłam tak a nie inaczej należy poprawić ścieżki dostępu do czcionek w pliku icomoon.css. W wersji oryginalnej wygląda to tak:

@font-face {
  font-family: 'icomoon';
  src:    url('fonts/icomoon.eot?nnmadt');
  src:    url('fonts/icomoon.eot?nnmadt#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?nnmadt') format('truetype'),
    url('fonts/icomoon.woff?nnmadt') format('woff'),
    url('fonts/icomoon.svg?nnmadt#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

A po zmianie…

@font-face {
  font-family: 'icomoon';
  src:    url('../fonts/icomoon.eot?nnmadt');
  src:    url('../fonts/icomoon.eot?nnmadt#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?nnmadt') format('truetype'),
    url('../fonts/icomoon.woff?nnmadt') format('woff'),
    url('../fonts/icomoon.svg?nnmadt#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

Kolejna ważna rzecz. Jeśli dodajemy nowy zestaw czcionek to trzeba też head naszej strony uzupełnić o nową ścieżkę, czyli po prostu dodać kolejny link.

 <!-- Custom Fonts -->
	...
	<link rel="stylesheet" href="css/icomoon.css" type="text/css">

Po dokonaniu tych drobnych zmian można już używać czcionki na stronie. Poszłam na łatwiznę i wykorzystałam istniejący już div. Tzn. zamieniłam telefon, który był w oryginalnym szablonie na kota. Zmieniłam też podpis, podlinkowując swojego bloga. W oryginale div wyglądał tak:

  <div class="col-lg-4 col-lg-offset-2 text-center">
    <i class="fa fa-phone fa-3x wow bounceIn"></i>
    <p>123-456-6789</p>
  </div>

Po zmianie ma następującą postać:

  <div class="col-lg-4 col-lg-offset-2 text-center">
    <i class="icon-pumiko fa-4x wow bounceIn"></i>
    <p><a href="http://pumiko.pl">pumiko.pl</a></p>
  </div>

W praktyce podmieniłam tylko wcześniejszą ikonkę i zmieniłam styl fa-3x na fa-4x. Zmiana ta miała na celu powiększenie kota, bo okazał się zbyt drobny w stosunku do pozostałych ikonek.

Jak wygląda moja pierwsza literka zobaczycie na Słoiczki.pl

Na zakończenie

Dzięki wprowadzaniu zmian i pracy z HTMLem i CSSami uczę się używać gita posiłkując się nieco blogiem Na miękko. Na razie nauka na poziomie nowicjusza, ale muszę się jeszcze przyzwyczaić do używania nowego narzędzia :)

Teraz chciałabym jak najszybciej przygotować pozostałe ikonki i dorzucić je na stronę, zmienić teksty na stronie, a w następnej kolejności zająć się formularzem :)

PS. W międzyczasie sprawdziłam jeszcze jeden generator czcionek - Fontello. Niestety też nie radzi sobie z kotem :(