Vlastní obrázkové písmo

Jak vytvořit a implementovat vlastní obrázkové písmo

Dřív  se ikony do webu vkládaly jako bitmapové obrázky (nejčastěji PNG na průhledném pozadí), později jako vektory (SVG). Dnes už si můžete snadno na základě SVG obrázku vytvořit i své vlastní obrázkové písmo a vytvořit tak ikonu jednoduše upravitelnou pomocí CSS.

V tomto článku si ukážeme jak vytvořit vlastní ikonu jako písmo (Icon Font).

Co je to Icon Font?

Icon Font je vlastně obrázkové písmo. Zobrazení ikony pomocí písma není v ničem odlišné od písma použitého pro nadpisy a text. Používání vlastní ikony jako písma má spoustu výhod:

  • Ikona je škálovatelná bez ztráty kvality;
  • není potřeba speciálně řešit retina zobrazení;
  • jednoduše upravitelná pomocí CSS (barva, velikost, přechod, stínování atd.);
  • jednu ikonu můžete použít opakovaně s různým nastavení barevnosti, velikosti nebo odsazení;
  • Icon Font se načítá rychleji než SVG.

Nicméně jsou tu i nevýhody. Například rozdíly mezi prohlížeči mohou vést k různému renderování a drobným rozdílům v zobrazení.

Ikony

Než se do tvorby vlastního písma pustíte, je potřeba mít připravené ikony ve formátu SVG (Scalable Vector Graphics). Ikony si můžete navrhnout vlastní nebo si je stáhnout z databank jako je FontAwesome nebo Google Icons.

Google Icons
Google Icons

Tvorba vlastního písma s ikonkami

Jakmile máte připravené všechny ikony, můžete se pustit do samotné tvorby obrázkového písma.

Proces je velmi jednoduchý, protože existují online nástroje, které je k tomu možné využít. Patří mezi ně například icomoon nebo Fontello.

V tomto návodu budeme dále pokračovat s icomoon.

Krok 1: Nahrajte do nástroje ikony a vytvořte vlastní sestavu.

Nahrání vlastních ikon
Nahrání vlastních ikon

Krok 2: Vyberte ikony, které chcete zahrnout do vlastního písma.

Výběr ikony
Výběr ikony

Krok 3: Vygenerujte písmo.

Generování písma
Generování písma

Krok 4: Přejmenujte ikony a případně i definujte unicode znaky (volitelné).

Přejmenování ikon
Přejmenování ikon

Krok 5: Stáhněte vygenerované písmo.

Stažení písma
Stažení písma

Implementace písma do WordPress šablony

Stažený zip obsahuje několik připravených souborů, mezi nimi i CSS styly a soubory písma ve složce fonts.

Pro implementaci do šablony je nejlepší k tomu využít child šablonu.

Krok 1: Zkopírujte složku fonts z rozbaleného zipu do adresáře child šablony (wp-content/themes/[slozkachildsablony]) na FTP.

FTP přesun složky fonts
FTP přesun složky fonts

Krok 2: Do style.css v child šabloně vložte následující kód.

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

Krok 3: Použití v HTML.

Ikonu můžete vložit pomocí následujícího HTML kódu:

˂span class="icon-toret">˂/span>

Třída “icon-toret” se generuje ze zadaného názvu ikony při generování písma. Je tedy potřeba případně upravit podle vlastního zadání. Pokud si nejste jistí, podívejte se do stylů ve stažené složce z iconmoon.

Odkazující třída pro stylování je:

.icon-toret:before {
  content: "\e900";
  color: #9ea3a8;
}

Příklad stylování této ikony pak může být například:

.icon-toret:before {
 content: "61";
 color: #c0dfe8;
 font-size: 72px;
 margin-bottom: 24px;
 }

.icon-write:hover::before {
 color: #000000;
 }

Ukázka z praxe, kde jsme vygenerovanou ikonu použili u našich WooCommerce pluginů.

Toret Zásilkovna
Toret Zásilkovna

Správa WordPress webu

Nemusíte na to být sami. Pomůžeme vám s pravidelnou údržbou i novými vylepšeními.

Více informací

1 názor na “Jak vytvořit a implementovat vlastní obrázkové písmo”

Diskuze

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Nákupní košík

Neuteklo vám něco?

Pokrok a WordPress na nikoho nečekají, tak nám tu raději nechte e-mail, ať o nic nepřijdete!

Zkontrolujte svoji doručenou poštu nebo spam koš, abyste mohli svůj e-mail potvrdit.

Vylaďte WordPress stránky s naším tahákem

V e-booku najdete informace a rady pro WordPress od A do Z. Zadejte e-mail a my vám WordPress tahák pošleme.

Zkontrolujte svoji doručenou poštu nebo spam koš, abyste mohli svůj e-mail potvrdit.

Přejít nahoru