Návody poradna WordPress » Ikonky na webu » Jak změnit ikonu u sociálních sítí, např. chcete u DIVI šablony změnit tlačítko v patičce webu na jiné, které šablona nenabízí

Jak změnit ikonu u sociálních sítí, např. chcete u DIVI šablony změnit tlačítko v patičce webu na jiné, které šablona nenabízí

DIVI šablona v základu nabízí 4 ikony sociálních sítí v patičce.

Možnosti jsou:

  • Facebook,
  • Twitter,
  • Instagram
  • Google+, který už nám je k ničemu, protože přestal fungovat

Takže máme jedno tlačítko v patičce webu navíc a můžeme ho změnit na jinou odkazující sociální ikonu.

Jako příklad budeme chtít vložit do patičky webu ikonu YouTube.

Nejprve si vyberte ikonku na webu https://fontawesome.com/icons

Já jsem si vybrala jako příklad ikonu cyklisty číslo UNI code je f84a (najdete nad ikonou viz obrázek níže)

Do CSS si zadáte tento kód, kde si nahradíte číslo ikony dle sebe

.et-social-google-plus a.icon:before {
content: “\f84a”;
}

A výsledek by měl být tento:

Může se stát, že úprava nebude fungovat, v tom případě ještě do stránek do části <head> musíte zadat sript z webu https://fontawesome.com/ kde je potřeba se přihlásit a vytvořit si KIT (tento “KIT” je vlastně script s jedinečným kódem) jeden můžete získat zdarma, což vám plně postačuje a nebo pokud máte více webových stránek, můžete použít jeden script pro více stránek.

Možná problém by mohl nastat tehdy, když si vyberete na webu https://fontawesome.com/ ikonu z jiné skupiny, abyste porozumněli ikony jsou rozděleny do 4 skupin:

  • Solid
  • Regular
  • Light
  • Duotone
  • Brands

takže vždy jakmile si vyberete ikonu, tak se podívejte do jaké skupiny patří

Jakmile budete vědět skupinu, je potřeba upravit kód ještě dle toho o jakou skupinu jde:

  • Solid
  • Regular
  • Light
  • Duotone
  • Brands

takže vždy jakmile si vyberete ikonu, tak se podívejte do jaké skupiny patří a dle tabulky níže budete hledat buď ikony SOLID nebo ikony BRANDS 

Rozdělení ikonek do skupin:

StyleAvailability@font-face weight@font-face font-family
SolidZDARMA900Font Awesome 5 Free  (Font Awesome 5 Pro )
RegularPro Plan Required400Font Awesome 5 Pro
LightPro Plan Required300Font Awesome 5 Pro
DuotonePro Plan Required900Font Awesome 5 Duotone
BrandsZDARMA400Font Awesome 5 Brands

u ikon “solid” budete upravovat kód font-weight: 900; font-family: “Font Awesome 5 Free”;

u ikon “brands” budete zadávat kód font-weight: 400; font-family: “Font Awesome 5 Brands”;

 

.et-social-google-plus a.icon:before {
content: “\zde bude ikona ze skupiny solid“;
font-weight: 900;
font-family: “Font Awesome 5 Free“;

}

.et-social-google-plus a.icon:before {
content: “\zde bude ikona ze skupiny brands“;
font-weight: 400;
font-family: “Font Awesome 5 Brands“;
}

Radka

Radka

Moje motto: “Tvorba webových stránek ubírá mi spánek”. Baví mě tvorba webových stránek s redakčním systémem WordPress a vše kolem webů takže grafika, SEO optimalizace a protože jsem bývalá účetní, tak samozřejmě i troška číslíček v marketingu a PPC kampaně. To co umím předávám i dále a to pomocí školení WordPress a také jsem se odhodlala a začala už konečně psát “blog”, za který mě strýček Google nebude mít rád, protože nejsem žádný pisálek a ty mé příspěvky jsou hodně stručné bez omáčky okolo, tak alespoň doufám, že jsou výstižné. Na druhou stranu ten můj blogíček funguje hlavně pro mě jako takový vzpomínáček.