Kreisfeuerwehrverband Roth - Die Feuerwehren im Landkreis Roth



WebFont Demo

© 2025 Feuerwehr Petersgmünd

Liste der vorhandenen Webfonts

Durch Verwendung von <i class="kfv-[iconname]"></i> oder <i class="pe-7s-[iconname]"></i> werden jeweils die Icons in den Text eingfügt.
[iconname] bezeichnet dabei den Iconname, welcher in nebenstehendn Listen zu finden ist.

Am Einfachsten werden die Icons in einem HTML Tag eingebunden wie z.B. <i> oder <span> hier ein paar Beispiele:

         
               <span class="pe-7s-map-marker"></span> pe-7s-map-marker

               <i class="pe-7s-home"></i> pe-7s-home

               <span class="kfv-scheidgeraet"></span> kfv-scheidgeraet

               <i class="kfv-schneidgeraet"></i> kfv-schneidgeraet

Helper classes based on font-awesome useful classes (optional)

Below you will find a list of useful classes to modify the icon display, layout, sizes etc... They come with the helper.css file and are based on a modified version of font-awesome classes. Important: if you already use font-awesome (FA) icon font in your website, you might want to delete the classes in the helper file under /* FA based classes */ and use the FA classes instead.

Larger Icons & Vertical Align

pe-7s-map-marker

pe-7s-map-marker

pe-7s-map-marker

kfv-logo-nurwappen

kfv-schneidgeraet

To increase icon sizes relative to their container, use the pe-lg (33% increase), pe-2x, pe-3x, pe-4x, or pe-5x classes.
To align the icon at the middle of a text, use the pe-va class. 

<p><i class="pe-7s-map-marker pe-lg pe-va"></i> pe-7s-map-marker</p>
<p><i class="pe-7s-map-marker pe-2x pe-va"></i> pe-7s-map-marker</p>
<p><i class="pe-7s-map-marker pe-3x pe-va"></i> pe-7s-map-marker</p>
<p><i class="kfv-logo-nurwappen pe-4x pe-va"></i> kfv-logo-nurwappen</p>
<p><i class="kfv-schneidgeraet pe-5x pe-va"></i> kfv-schneidgeraet</p>
If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height. pe-7s-attention

Fixed Width Icons

Use pe-fw to set icons at a fixed width. Great to use when variable icon widths throw off alignment. Especially useful in things like nav lists. (Reminder: nav list classes in the example are from bootstrap) 

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#"><i class="pe-7s-home pe-fw"></i> Home</a></li>
  <li class="active"><a href="#"><i class="pe-7s-culture pe-fw"></i> Library</a></li>
  <li class="active"><a href="#"><i class="pe-7s-browser pe-fw"></i> Applications</a></li>
  <li class="active"><a href="#"><i class="pe-7s-config pe-fw"></i> Settings</a></li>
</ul>

List Icons

  • List icons (like these)
  • can be used
  • to easily replace
  • default bullets in lists

Use pe-ul and pe-li to easily replace default bullets in unordered lists.

<ul class="pe-ul">
<li><i class="pe-li pe-7s-star"></i> List icons (like these) </li>
<li><i class="pe-li pe-7s-angle-right"></i> can be used </li>
<li><i class="pe-li pe-spin pe-7s-help2"></i> to replace </li>
<li><i class="pe-li pe-7s-play"></i> default bullets in lists </li>
</ul>

Bordered & Pulled Icons

Use a few styles together and you'll have easy pull quotes or a great introductory article icon.

Use pe-border and pull-right or pull-left for easy pull quotes or article graphics. 

<i class="pe kfv-spreitzer pe-2x pull-left pe-border"></i>
Use a few styles together and you'll have easy pull quotes or a great introductory article icon.

Farbe der Icons

Verwende pe-muted (#eeeeee) und pe-light (#ffffff) oder pe-dark (#333333) um die Farbe je nach Kontrastwunsch anzupassen. 

<i class="pe kfv-spreitzer pe-2x pull-left pe-dark"></i>
Styles können kombiniert werden.

Spinning Icons

Use the pe-spin class to get any icon to rotate. Works well with pe-7s-science, pe-7s-refresh, and pe-7s-config. 

<i class="pe-7s-science pe-spin"></i>
<i class="pe-7s-refresh pe-spin"></i>
<i class="pe-7s-config pe-spin"></i>

CSS3 animations aren't supported in IE8 - IE9.

Rotated & Flipped

  normal
  fa-rotate-90
  fa-rotate-180
  fa-rotate-270
  fa-flip-horizontal
  fa-flip-vertical

To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes. 

<i class="pe-7s-graph3"></i>&nbsp; normal<br>
<i class="pe-7s-graph3 pe-rotate-90"></i>&nbsp; pe-rotate-90<br>
<i class="pe-7s-graph3 pe-rotate-180"></i>&nbsp; pe-rotate-180<br>
<i class="pe-7s-graph3 pe-rotate-270"></i>&nbsp; pe-rotate-270<br>
<i class="pe-7s-graph3 pe-flip-horizontal"></i>&nbsp; pe-flip-horizontal<br>
<i class="pe-7s-graph3 pe-flip-vertical"></i>&nbsp; pe-flip-vertical

Stacked Icons


pe-7s-graph3 on pe-7s-monitor

pe-7s-gleam on pe-7s-cloud

pe-7s-look on pe-7s-albums

kfv-strahlrohr on kfv-feuer4

To stack multiple icons, use the pe-stack class on the parent, the pe-stack-1x for the regularly sized icon, and pe-stack-2x for the larger icon. pe-inverse can be used as an alternative icon color and you can add your own color palette for more variations. 

<span class="pe-stack pe-lg">
  <i class="pe-7s-monitor pe-stack-2x"></i>
  <i class="pe-7s-graph3 pe-stack-1x"></i>
</span>
<br>pe-7s-graph3 on pe-7s-monitor<br>
<span class="pe-stack pe-lg">
  <i class="pe-7s-cloud pe-stack-2x blue"></i>
  <i class="pe-7s-gleam pe-stack-1x yellow"></i>
</span>
<br>pe-7s-gleam on pe-7s-cloud<br>
<span class="pe-stack pe-lg">
  <i class="pe-7s-albums pe-stack-2x"></i>
  <i class="pe-7s-look pe-stack-1x"></i>
</span>
<br>kfv-strahlrohr on kfv-feuer4<br>
<span class="pe-stack pe-lg">
  <i class="kfv-strahlrohr pe-stack-2x red"></i>
  <i class="kfv-feuer4 pe-stack-1x blue"></i>
</span>
<br>pe-7s-drop on pe-7s-umbrella