Programming Tooling

Shortcode for Font Awesome Icons

/ by Karsten Reincke | Leave a comment

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

  • Add the fol­low­ing lines to your functions.php1:
/*
 * (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');
  • 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. Bin­go.

  1. I’ve giv­en this code upstream to the project bootScore. Please check whether your ver­sion con­tains this short­code already, before you real­ly add it to your functions.php. [↩]
To top