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:
Download Programmcode:
Icons aus einem Font listen
Bildquelle im Beitrag:
- Image by Gerd Altmann from Pixabay
Fragen, Wünsche und Anregungen
Ich freue mich auf Fragen Wünsche und Anregungen an info@bt-webdesign.de.