I’ve been looking for icons :)

Welche Icons hat der Font?

Icons aus einem Font listen

Nicht immer sind die Namen der Icons in einem Font so gewählt, dass man direkt weiß, was sich dahinter versteckt. Deshalb habe ich mir ein kleines Programm geschrieben, das eine CSS-Datei mit den Icons als Input hat und diese im Browser mit Namen anzeigt.

Beispiel: Icons im Theme Betheme für Pagebuilder WPBakery

Das Theme Betheme für den Pagebuilder WPBakery beinhaltet 421 Icons in der Datei
   /wp-content/themes/betheme/fonts/mfn-icons.css.

Mit folgendem Programmcode liste ich die Icons aus der CSS-Font-Datei:

<?php
 
// .............................................................................
 
$inputCSS = "./wp-content/themes/betheme/fonts/mfn-icons.css"; // Pfad zur CSS-Datei anpassen !!!
$iconPrefix = '.icon-';                                        // Icon-Prefix anpassen !!!
 
// .............................................................................
 
if (!file_exists($inputCSS) || !is_readable($inputCSS)){
    echo "ERROR - Datei ".$inputCSS." ist nicht lesbar";
    return;
    }
 
if (( $handleIn = fopen($inputCSS, 'r')) !== FALSE ){
      echo "<!DOCTYPE html>";
      echo "<html lang='de-DE'>";
      echo "<head>";
      echo "<link rel='stylesheet' id='mfn-base-css'  href='".$inputCSS."' type='text/css' media='all' />";
      echo "<style>
.row{margin-right:-15px;margin-left:-15px;}
.col-md-2{position:relative;min-height:1px;padding-right:15px;padding-left:15px;width:16.66666667%;float:left;}
.bt_icon { padding: 10px; text-align: center; border-bottom: 1px solid #f0f0f0; font-size: 120%; margin-bottom: 20px; }
.bt_iname { margin-bottom: 10px; }
</style>";
      echo "</head>";
      echo "<body>";
 
      $icons = explode($iconPrefix,fread($handleIn, filesize($inputCSS)));
      echo "<h3>showIcons - Iconliste mit ".count($icons)." Icons</h3>";
      echo "<div class='row'>";
 
      for ( $i=0; $i<count($icons); $i++ ){
            if ( strpos($icons[$i], ':before') !== false ){
                 if ( ($i % 6) == 0 && $i > 0 ) echo "</div><div class='row'>";
                 echo "<div class='col-md-2 bt_icon'>";
                 echo "<div class='bt_iname'>".ltrim($iconPrefix,'.').substr($icons[$i],0,strpos($icons[$i], ':'))."</div>";
                 echo "<div class='bt_iicon'><i class='".ltrim($iconPrefix,'.').substr($icons[$i],0,strpos($icons[$i], ':'))."'></i></div>";
                 echo "</div>";
                 }
            }
      echo "</div>";
   }
else
    echo "ERROR - Open-Fehler Datei ".$inputCSS;
 
fclose($handleIn);
 
echo "</body>";
echo "</html>";
?>

 

Parameter anpassen

Im Programm-Code müssen folgende Parameter angepasst werden:

Pfad zur CSS-Datei

  • $inputCSS = "./wp-content/themes/betheme/fonts/mfn-icons.css";

Icon-Prefix

  • $iconPrefix = '.icon-';

In dem Beispiel werden alle 421 Icons aus der CSS-Datei, die mit dem $iconPrefix beginnen, gelistet:

  • .icon-camera:before{content:’\e828′}
  • .icon-camera-line:before{content:’\e829′}
  • .icon-cancel:before{content:’\e82a‘}

Output vom Programm

Liste mit den 421 Icons aus der CSS-Datei:

Icons aus dem Font listen

Download Programmcode:

Icons aus einem Font listen

 

Bildquelle im Beitrag:

 

Fragen, Wünsche und Anregungen

Ich freue mich auf Fragen Wünsche und Anregungen an info@bt-webdesign.de.

05254 / 67673
info@bt-webdesign.de
Kontaktformular