Font Awesome und eigene css-Klassen

Anlass dafür, gleich zu Anfang Font Awe­so­me Icons und eige­ne CSS-Klas­sen in und mit bootS­core als Word­Press-The­me zu the­ma­ti­sie­ren, gab mir die Form mei­ner Lis­te von pybS-Zie­len. Als HTML-basier­te Bul­let­lis­te war sie häss­lich, gera­de­zu unle­ser­lich. Da half kein Umfor­mu­lie­ren oder Umstruk­tu­rie­ren. Ver­kür­zen war aber auch kei­ne Opti­on. Sie soll­te wei­ter als voll­stän­di­ges Scope-State­ment fun­gie­ren. Also muss­te ich sie optisch ver­än­dern.

Zusammenfassung

• Font Awe­so­me Icons
  • Füge <i class="fa-regular fa-XYZ"></i> etc. auf HTML-Ebe­ne in einen Guten­berg-Block ein. ¹
• Lis­te ohne Bul­lets (per boot­strap) [sehr ein­fach]
  • Füge list_unstyled unter Block/Advanced/Additional CSS Classes in der Guten­berg-Side­bar einem Lis­ten-Block hin­zu.
• Lis­te ohne Bul­lets (per eige­ner CSS-Klas­se) [ein­fach]
  • Tra­ge define('WP_ENVIRONMENT_TYPE', 'development'); in Dei­ne wp-config.php Datei ein.
  • Füge die Zei­le.krNoBullets { list-style: none; } der Datei scss/_bscore_custom.scss Dei­nes Child-The­mes hin­zu.
  • Füge xyz unter Block/Advanced/Additional CSS Classes im Side­bar zu einem Block ein.
  • Kom­men­tie­re define('WP_ENVIRONMENT_TYPE', 'development'); in der wp-config.php wie­der aus.

Hintergrund

Es gibt meh­re­re Wege, Font-Awe­so­me in Word­Press-Posts und ‑Sei­ten ein­zu­bin­den. Ich könn­te etwa

• ein Font-Awe­so­me-Plug­in für Word­Press instal­lie­ren und mit Short­codes arbei­ten,
• ein Font-Awe­so­me-KIT nut­zen,
• oder die ‘Fonts’ selbst hos­ten, sie in die bootS­core-header.php laden las­sen, und die ein­zel­nen Icons als HTML-Ele­men­te in mei­nen Text ein­bin­den.

Glück­li­cher­wei­se geht das ein­fa­cher! Denn bootS­core ent­hält Font Awe­so­me schon. ² Von dort wird fontawesome/css/all.min.css per Style­sheet-Link in die Datei header.php inte­griert, also nicht erst übers Netz von einer exter­nen Quel­le her­un­ter­ge­la­den. Nie­mand wird mit­tel­bar dar­über infor­miert, wenn mein Leser sich die von mir ein­ge­bet­te­ten Icons ansieht. bootS­core darf also berech­tig­ter­wei­se sagen, es habe die Nut­zung GPDR freund­lich auf­ge­setzt: Wenn in die­ser Hin­sicht kei­ne Daten an Drit­te gege­ben wer­den, brau­che ich dazu auch nichts in mei­nem Daten­schutz­kon­zept zu sagen.

So redu­ziert sich der Auf­wand dar­auf, die i‑Tags auf HTML Ebe­ne in die Guten­berg Blocks ein­zu­bet­ten:

<ul><!-- wp:list-item -->
  <li>
    <i class="fa-regular fa-square-check"></i>
    binde Font Awesome Symbole via bootScore ein</li>
  <!-- /wp:list-item -->
  <!-- wp:list-item -->
  <li>
    <i class="fa-regular fa-square"></i>
    binde lokal installierte Google-Schriften ein</li>
  <!-- /wp:list-item --></ul>

Damit ent­steht dies:

• bin­de Font Awe­so­me Sym­bo­le via bootS­core ein
• bin­de lokal instal­lier­te Goog­le-Schrif­ten ein

Unschön bleibt jedoch, dass die Bul­let­points noch sicht­bar sind. Die stö­ren bei einer Check­lis­te. Ich muss die Lis­te also noch per <ul src="list-style-type:none!> etc. über­re­den, das anders zu hand­ha­ben. Dies in Guten­berg direkt auf HTML-Ebe­ne zu tun, funk­tio­niert nicht wirk­lich. Bes­ser wäre es, ich hät­te eine ent­spre­chen­de css-Klas­se in der bootS­core-Datei, die für mich zustän­dig ist, näm­lich _bscore_custom.scss — damit ich sie per Guten­berg mei­ner Check­lis­te zuwei­sen könn­te.

Dafür muss ich noch ler­nen, wie bootS­core mit css-Anpas­sun­gen umgeht:

• ‘Natür­lich’ edi­tie­re ich nur Datei­en in mei­nem Child-The­me. ³
• Außer­dem edi­tie­re ich die scss-Datei­en, kei­ne css-Datei. Denn bootS­core bringt einen scss-Com­pi­ler mit, der alle css-Datei­en aus den scss-Datei­en neu kom­pi­liert. ⁴
• So füge ich mei­ne Defi­ni­ti­on .krNoBullets { list-style: none; } in die Datei _bscore_custom.scss ein. ⁵
• Schließ­lich erzwin­ge ich, dass bei jeder Ände­rung in der Datei _bscore_custom.scss die Datei main.css neu kom­pi­liert wird, in dem ich in mei­ne wp-config.php Datei die Zei­le define('WP_ENVIRONMENT_TYPE', 'development'); auf­neh­me.
• Und ich ver­ges­se nicht, die Zei­le define('WP_ENVIRONMENT_TYPE', 'development'); am Ende wie­der aus­zu­kom­men­tie­ren. ⁶

Damit ent­stün­de fol­gen­de Lis­te

• bin­de Font Awe­so­me Sym­bo­le via bootS­core ein
• bin­de lokal instal­lier­te Goog­le-Schrif­ten ein

Aller­dings gibt es für die Unter­drü­ckung der Bul­let­points einen noch viel ein­fa­che­ren Weg: Boot­strap bringt ja fer­ti­ge Klas­sen­de­fi­ni­ti­on mit. Und da bootS­core Boot­strap ent­hält, kön­nen die­se Klas­sen auch via Guten­berg direkt einem Block zuge­wie­sen wer­den, wie z.B. die Klas­se list-unstyled einem Lis­ten-Block.

Im Übri­gen: Män­ner sind mit­ge­meint.

1. Nach der Akti­vie­rung von Short­codes für Font Awe­so­me kannst Du direkt in Guten­berg [­bsfa fa-regu­lar fa-XYZ] ein­ge­ben. [↩]
2. s. bootscore-main/fontawesome[↩]
3. Andern­falls ver­schwän­den mei­ne Modi­fi­ka­tio­nen bei jedem Update des the­mes bootscore-main.[↩]
4. Gin­ge ich anders vor, ver­schwän­den mei­ne Ergän­zun­gen bei jedem Com­pi­ler­lauf wie­der.[↩]
5. Denn die ist in den Ver­bund bereits ein­ge­bun­den.[↩]
6. Andern­falls lie­fe mei­ne Site wirk­lich lang­sam.[↩]