Web

Checklists With Font-Awesome On bootScore

/ by Karsten Reincke | Leave a comment

Pictograms at an airport

The form of my scope list con­vinced me to talk about Font Awe­some Icons and cus­tom CSS class­es in bootScore, first. A pure HTML list is ugly, in my case: down­right unread­able. No amount of reword­ing or restruc­tur­ing helped. Short­en­ing it was not an option either. It should con­tin­ue to func­tion as a com­plete scope state­ment. So I had to change its appear­ance.

[ en | de ]

Solution

  • Font Awe­some Icons
    • Add <i class="fa-regular fa-XYZ"></i> etc. into Guten­berg block by edit­ing it on the HTML lev­el.1
  • List with­out bul­lets (via boot­strap) [very sim­ple]
    • Add list_unstyled to Block/Advanced/Additional CSS Classes in the Guten­berg side­bar
  • List with­out bul­lets (via self made CSS class) [sim­ple]
    • Insert define('WP_ENVIRONMENT_TYPE', 'development'); into your file wp-config.php
    • Add .krNoBullets { list-style: none; } to the file scss/_bscore_custom.scss of your child theme.
    • Insert krNoBullets to Block/Advanced/Additional CSS Classes in the side­bar.
  • Uncom­ment define('WP_ENVIRONMENT_TYPE', 'development'); in your file wp-config.php.

Background

There are sev­er­al ways to include Font Awe­some in Word­Press posts and pages. I could for exam­ple

For­tu­nate­ly, there is an eas­i­er way! bootScore already includes Font Awe­some.2 From there, fontawesome/css/all.min.css is loaded into the header.php file via a style-sheet link, i.e. not down­loaded from an exter­nal source. So, nobody can get noti­fi­ca­tions if my read­er looks at the icons embed­ded by me. Hence, bootScore may legit­i­mate­ly say it had set up the usage GPDR friend­ly: If no data is giv­en to third par­ties in this respect, I don’t need to say any­thing about Font Awe­some in my pri­va­cy pol­i­cy.

That reduces my effort to embed the i‑tags into the Guten­berg blocks on the HTML lev­el:

<ul>
  <!-- wp:list-item -->
  <li>
    <i class="fa-regular fa-square-check"></i>
    include Font Awesome Symbols via bootScore</li>
  <!-- /wp:list-item -->
  <!-- wp:list-item -->
  <li>
    <i class="fa-regular fa-square"></i>
    include locally installed Google fonts</li>
  <!-- /wp:list-item -->
</ul>

Here is the result:

  • include Font Awe­some Sym­bols via bootScore
  • include local­ly installed Google fonts

How­ev­er, it is unpleas­ant that the bul­let points are still vis­i­ble. That dis­turbs with a check­list. So I still have to per­suade the list via <ul src="list-style-type:none!> etc. to han­dle this dif­fer­ent­ly. Doing this in Guten­berg direct­ly at the HTML lev­el does­n’t real­ly work. It would be bet­ter if I had a cor­re­spond­ing css class in the bootScore file that is respon­si­ble for me: _bscore_custom.scss

To real­ize that, I have to learn how bootScore han­dles css cus­tomiza­tions:

  • ‘Of course’ I only edit files in my child theme.3
  • Also, I edit only the scss files, not any css file. This is because bootScore comes with an scss com­pil­er that recom­piles all css files from the scss files.4
  • So I add my def­i­n­i­tion .krNoBullets { list-style: none; } to the file _bscore_custom.scss. 5
  • Final­ly, I force main.css to be recom­piled for every change in _bscore_custom.scss by adding the line define('WP_ENVIRONMENT_TYPE', 'development'); to my wp-config.php file.
  • And I don’t for­get to com­ment out the line define('WP_ENVIRONMENT_TYPE', 'development'); at the end. 6

This is the result:

  • include Font Awe­some Sym­bols via bootScore
  • include local­ly installed Google fonts

How­ev­er, there is a much eas­i­er way to do this: Boot­strap as the base of bootScore comes with ready-to-use class def­i­n­i­tions. And since bootScore con­tains Boot­strap, these class­es can also be assigned direct­ly to a block via Guten­berg, e.g. the class list-unstyled to a list block.

And how does this …

… sup­port our migra­tion to bootScore? Well, if a web design­er must aban­don her cur­rent Word­Press theme, she needs a replace­ment. A free ‘off-the-shelf’ theme, she prob­a­bly wants to per­son­al­ize. First a bit cos­met­i­cal­ly, then in terms of the gray val­ue of her pages, mul­ti­lin­gual­ism and inter­nal ref­er­ence tech­niques and link­ing. Final­ly, she per­haps enables spe­cial foot­ers, a sec­ondary menu or a copy­right notice before check­ing the SEO fea­tures of the select­ed theme. This is a way that this post sup­ports too.

  1. After hav­ing acti­vat­ed Short­codes for Font Awe­some you can direct­ly insert [­bsfa fa-reg­u­lar fa-XYZ] via Guten­berg. [↩]
  2. see bootscore-main/fontawesome [↩]
  3. Oth­er­wise, my mod­i­fi­ca­tions would dis­ap­pear with every update of themes bootscore-main. [↩]
  4. If I did oth­er­wise, my addi­tions would dis­ap­pear again with each com­pil­er run. [↩]
  5. It is already includ­ed in the set of files rel­e­vant to the com­pi­la­tion run. [↩]
  6. Oth­er­wise, my site would run real­ly slow. [↩]
To top