Cum adăugăm icoana 𝕏 în Font Awesome 5 și versiuni mai vechi

În 2022 compania Twitter a fost cumpărată de Elon Musk care ulterior a redenumit-o în 𝕏. Automat toate imaginile, icoanele și logo-ul au fost schimbate cu noua identitate.

Până acum nu am avut nici o treabă, icoanele de share pe site conțineau vechiul logo al Twitter, păsărica. Așa că mi-a trecut prin cap, să modific pasărea cu 𝕏 și am descoperit că nu se poate, teoretic. Pentru icoanele mici de pe site tema folosește Font Awesome 5, iar după niște căutări pe Github am descoperit că dezvoltatorii FA au decis să adauge icoana doar în ultima versiune 6.5.2, iar versiunile mai vechi nu vor primi noua icoană.

Așa că, dacă ai Font Awesome 4 & 5 trebuie să faci update la ultima versiune, care presupune alte costuri, licență, etc.

Cum funcționează Font Awesome?

Păi simplu, toate svg-urile sunt undeva pe un CDN și au alocate câte un număr unicod care se regăsește chiar la ei pe site. Acesta este adăugat în fișierul font-awesome.css care se găsește în folderul temei.

Cum schimbăm icoana Twitter cu 𝕏?

Intrăm în cPanel, deschidem File Manager și navigăm în folderul temei. Folosind căsuța de căutare scriem awesome, iar apoi o să ne fie afișat fișierul font-awesome.css. Deschidem în modul edit și căutăm după cuvântul „twitter”.

.fa-twitter:before{content:"\f099"}.fa-twitter-square:before{content:"\f081"}

După cum se poate observa, icoana twitter folosită în clasa fab fa-twitter are numărul \f099. Ce vom face noi? Vom schimba conținutul cu următoarele date, adică copy – paste.

.fa-twitter:before{content:"𝕏";font-size:1.3em}.fa-twitter-square:before{content:"𝕏"}

Gata, modificați fontul cu alte valori sau puneți alte date CSS ca să se potrivească cu tema voastră. La mine nu a fost nevoie, decât de font și un pic de padding-top și icoana este disponibilă deja pe pagina principală în partea de sus și jos din articol unde sunt butoanele de share.

Altă viață 🙂