Programming Tooling

Shortcode for Font Awesome Icons

/ by Karsten Reincke | Leave a comment

Scissors and comb for creating shortcuts

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.

[ 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. Our pro­pos­al has been accept­ed by the project. 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.

To top