Web

bootScore Shortcode For Font-Awesome Icons

/ by Karsten Reincke | Leave a comment

Scissors and comb for creating shortcuts

Hav­ing enabled Font-Awe­some is a nice fea­ture of bootScore. Some­what frus­trat­ed , I have to add that embed­ding ‘own’ HTML code into a WordPress/Gutenberg block via ‘Edit as HTML’ occa­sion­al­ly destroys the type and con­tent of the block : If the code is sus­pect to the Guten­berg edi­tor, it replaces the work already done with an emp­ty HTML block . Annoy­ing if you just want­ed to quick­ly add anoth­er icon from Font Awe­some via <i class="fa-regular fa-square-check"></i>. That must be solved dif­fer­ent­ly, by a bootScore Short­code For Font-Awe­some — for exam­ple:

[ en | de ]

Solution

  • Select the intend­ed sym­bol from font awe­some and its code.
  • Insert there, where you want to get a Font Awe­some Icon, direct­ly into the Guten­berg-Edi­tor a short­code like [­bsfa fa-regular fa-square].

Background

Short­codes are often used on Word­Press to insert oth­er ele­ments into the Guten­berg blocks with­out hav­ing to use ‘Edit as HTML’. A func­tion iden­ti­fi­er and the required para­me­ters are embraced by square brack­ets. In the file functions.php a cor­re­spond­ing func­tion is defined and made known to Guten­berg or Word­Press — very impor­tant — under the select­ed func­tion iden­ti­fi­er.

That means for the Font Awe­some Icons that between the open­ing all Font Awe­some class­es can be insert­ed which you can use in <i class=""></i>. The func­tion gets them as attrib­ut­es, and Word­Press itself embeds the com­put­ed HTML string into the respec­tive block.

Update Plate
His­tor­i­cal­ly still this: Until bootScore-5.2.3.2 we had to extend our functions.php to get this fea­ture. Now, with the release of bootScore-5.2.3.3, this is no longer nec­es­sary. Even­tu­al­ly, the project accept­ed our pro­pos­al. Thanks for that. Now bootScore already brings the fol­low­ing code: 

/*
 * (c) 2023 Karsten Reincke
 *  SPDX-License-Identifier: MIT
 */
function insert_bsfa($atts){
  $atts = (array) $atts;
  $vstr = "";
  foreach ( $atts as $value ) {
  $vstr = $vstr . " $value";
  }
  return '<i class="' . $vstr . '"></i>';
 }
add_shortcode('bsfa', 'insert_bsfa');

Bin­go.

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.

To top