DIVI šablona v základu nabízí 4 ikony sociálních sítí v patičce.
Možnosti jsou:
- Facebook,
- Twitter,
- 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:
| Style | Availability | @font-face weight | @font-face font-family |
|---|---|---|---|
| Solid | ZDARMA | 900 |
Font Awesome 5 Free (Font Awesome 5 Pro ) |
| Regular | Pro Plan Required | 400 |
Font Awesome 5 Pro |
| Light | Pro Plan Required | 300 |
Font Awesome 5 Pro |
| Duotone | Pro Plan Required | 900 |
Font Awesome 5 Duotone |
| Brands | ZDARMA | 400 |
Font 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„;
}