Icons
Hier findest du jede Menge Icons.
Font Awesome
<i class="fa fa-home fa-5x" aria-hidden="true"></i>
<i class="fa fa-home fa-4x" aria-hidden="true"></i>
<i class="fa fa-home fa-3x" aria-hidden="true"></i>
<i class="fa fa-home fa-2x" aria-hidden="true"></i>
<i class="fa fa-home fa-lg" aria-hidden="true"></i>
<i class="fa fa-home" aria-hidden="true"></i>
Icons in verschiedenen Größen
<i class="fa fa-home fa-3x text-primary" aria-hidden="true"></i>
<i class="fa fa-home fa-3x text-secondary" aria-hidden="true"></i>
<i class="fa fa-home fa-3x text-info" aria-hidden="true"></i>
<i class="fa fa-home fa-3x text-light" aria-hidden="true"></i>
<i class="fa fa-home fa-3x text-dark" aria-hidden="true"></i>
<i class="fa fa-home fa-3x text-success" aria-hidden="true"></i>
<i class="fa fa-home fa-3x text-warning" aria-hidden="true"></i>
<i class="fa fa-home fa-3x text-danger" aria-hidden="true"></i>
Icons in verschiedenen Farben
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x text-primary" aria-hidden="true"></i>
<i class="fa fa-home fa-stack-1x fa-inverse" aria-hidden="true"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x text-primary" aria-hidden="true"></i>
<i class="fa fa-home fa-stack-1x fa-inverse" aria-hidden="true"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary" aria-hidden="true"></i>
<i class="fa fa-home fa-stack-1x fa-inverse" aria-hidden="true"></i>
</span>
<span class="fa-stack fa-3x">
<i class="fa fa-circle fa-stack-2x text-primary" aria-hidden="true"></i>
<i class="fa fa-home fa-stack-1x fa-inverse" aria-hidden="true"></i>
</span>
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary" aria-hidden="true"></i>
<i class="fa fa-home fa-stack-1x fa-inverse" aria-hidden="true"></i>
</span>
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary" aria-hidden="true"></i>
<i class="fa fa-home fa-stack-1x fa-inverse" aria-hidden="true"></i>
</span>
Inverse Icons in farbigem Kreis
<i class="fa fa-calendar fa-2x icon-bordered rounded-circle text-danger" aria-hidden="true"></i>
<i class="fa fa-map-marker fa-2x icon-bordered rounded-circle text-danger" aria-hidden="true"></i>
<i class="fa fa-bullhorn fa-2x icon-bordered rounded-circle text-danger" aria-hidden="true"></i>
<i class="fa fa-eye fa-2x icon-bordered rounded-circle text-danger" aria-hidden="true"></i>
<i class="fa fa-user fa-2x icon-bordered rounded-circle text-danger" aria-hidden="true"></i>
Icon im Kreis
Siehe auch Font Awesome-Dokumentation unter
https://fontawesome.com/v4.7.0/icons/.
Icon-List
Bei der Font Awesome Icon-List (.fa-ul) wird jedem <li> ein individuelles Icon zugeordnet.
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Lorem ipsum</li>
<li><i class="fa-li fa fa-check text-success"></i>Lorem ipsum</li>
<li><i class="fa-li fa fa-times text-danger"></i>Lorem ipsum</li>
<li><i class="fa-li fa fa-home"></i>Lorem ipsum</li>
<li><i class="fa-li fa fa-check-square"></i>Lorem ipsum</li>
<li><i class="fa-li fa fa-square"></i>Lorem ipsum</li>
<li><i class="fa-li fa fa-check-square-o"></i>Lorem ipsum</li>
<li><i class="fa-li fa fa-square-o"></i>Lorem ipsum</li>
</ul>
Font Awesome Icon-List
Lorem Ipsum System Icons
<span class="psicon-compass icon-6x text-primary" aria-hidden="true"></span>
<span class="psicon-compass icon-5x text-primary" aria-hidden="true"></span>
<span class="psicon-compass icon-4x text-primary" aria-hidden="true"></span>
<span class="psicon-compass icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-compass icon-2x text-primary" aria-hidden="true"></span>
<span class="psicon-compass icon-lg text-primary" aria-hidden="true"></span>
<span class="psicon-compass text-primary" aria-hidden="true"></span>
Lorem Ipsum System Icon Größen
<span class="psicon-compass icon-2x icon-bordered icon-aligned rounded-circle text-danger" aria-hidden="true"></span>
<span class="psicon-cog icon-2x icon-bordered icon-aligned rounded-circle text-danger" aria-hidden="true"></span>
<span class="psicon-key icon-2x icon-bordered icon-aligned rounded-circle text-danger" aria-hidden="true"></span>
Icon im Kreis
<span class="psicon-pos icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-person-key icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-banknote-credit-card icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-balance icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-cloud-arrow-down icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-persons icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-invoice-circuit-alt icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-crosshairs icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-box-item-arrow-back icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-invoice-circuit icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-chain icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-wrench icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-shield icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-invoice-cog icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-clock icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-europe icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-tag icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-compass icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-plug icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-people-network icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-service-bell icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-data-exchange icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-cms icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-item icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-cog icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-key icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-invoice-label icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-puzzle-piece icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-update icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-connector icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-people icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-person icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-circuit icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-invoice-arrow icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-box-invoice-item icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-statistics icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-pallet-truck icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-cloud icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-banknote icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-multi-channel icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-omni-channel icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-open icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-cart icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-deliveryman icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-europallet icon-3x text-primary" aria-hidden="true"></span>
<span class="psicon-pushcart icon-3x text-primary" aria-hidden="true"></span>
Lorem Ipsum System Icons
Mixed Icons
<span class="psicon-compass icon-2x icon-bordered icon-aligned rounded-circle text-danger" aria-hidden="true"></span>
<span class="psicon-cog icon-2x icon-bordered icon-aligned rounded-circle text-danger" aria-hidden="true"></span>
<i class="fa fa-calendar fa-2x icon-bordered rounded-circle text-danger" aria-hidden="true"></i>
<i class="fa fa-map-marker fa-2x icon-bordered rounded-circle text-danger" aria-hidden="true"></i>
<i class="fa fa-bullhorn fa-2x icon-bordered rounded-circle text-danger" aria-hidden="true"></i>
<i class="fa fa-eye fa-2x icon-bordered rounded-circle text-danger" aria-hidden="true"></i>
<i class="fa fa-user fa-2x icon-bordered rounded-circle text-danger" aria-hidden="true"></i>
<span class="psicon-key icon-2x icon-bordered icon-aligned rounded-circle text-danger" aria-hidden="true"></span>
Icon im Kreis
Icons im Kontext
Beschreibung <html> .class
Columns
Beschreibung <html> .class
-
Überschrift
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
-
Überschrift
Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
-
Überschrift
Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor consectetuer adipiscing elit.
-
Überschrift
Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
-
Überschrift
Ligula eget dolor. Aenean massa. Lorem ipsum dolor consectetuer adipiscing elit.
<ul class="row list-unstyled">
<li class="col-sm-6 col-md-4 col-lg-3">
<div class="text-center">
<span class="psicon-cog icon-4x text-primary" aria-hidden="true"></span>
</div>
<h4 class="text-center">Überschrift</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</p>
</li>
<li class="col-sm-6 col-md-4 col-lg-3">
<div class="text-center">
<span class="psicon-key icon-4x text-primary" aria-hidden="true"></span>
</div>
<h4 class="text-center">Überschrift</h4>
<p>
Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</p>
</li>
<li class="col-sm-6 col-md-4 col-lg-3">
<div class="text-center">
<span class="psicon-banknote-credit-card icon-4x text-primary" aria-hidden="true"></span>
</div>
<h4 class="text-center">Überschrift</h4>
<p>
Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor consectetuer adipiscing elit.
</p>
</li>
<li class="col-sm-6 col-md-4 col-lg-3">
<div class="text-center">
<span class="psicon-compass icon-4x text-primary" aria-hidden="true"></span>
</div>
<h4 class="text-center">Überschrift</h4>
<p>
Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</p>
</li>
<li class="col-sm-6 col-md-4 col-lg-3">
<div class="text-center">
<span class="psicon-circuit icon-4x text-primary" aria-hidden="true"></span>
</div>
<h4 class="text-center">Überschrift</h4>
<p>
Ligula eget dolor. Aenean massa. Lorem ipsum dolor consectetuer adipiscing elit.
</p>
</li>
</ul>
Responsive Icon-Liste (xs: 1, sm: 2, md: 3, ab lg: 4 pro Zeile) mit Headline und Fließtext
-
Überschrift
-
Überschrift
-
Überschrift
-
Überschrift
-
Überschrift
-
Überschrift
-
Überschrift
<ul class="row list-unstyled">
<li class="col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
<div class="text-center">
<span class="psicon-cog icon-4x text-primary" aria-hidden="true"></span>
</div>
<div class="h4 text-center">Überschrift</div>
</li>
<li class="col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
<div class="text-center">
<span class="psicon-key icon-4x text-primary" aria-hidden="true"></span>
</div>
<div class="h4 text-center">Überschrift</div>
</li>
<li class="col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
<div class="text-center">
<span class="psicon-banknote-credit-card icon-4x text-primary" aria-hidden="true"></span>
</div>
<div class="h4 text-center">Überschrift</div>
</li>
<li class="col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
<div class="text-center">
<span class="psicon-compass icon-4x text-primary" aria-hidden="true"></span>
</div>
<div class="h4 text-center">Überschrift</div>
</li>
<li class="col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
<div class="text-center">
<span class="psicon-circuit icon-4x text-primary" aria-hidden="true"></span>
</div>
<div class="h4 text-center">Überschrift</div>
</li>
<li class="col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
<div class="text-center">
<span class="psicon-deliveryman icon-4x text-primary" aria-hidden="true"></span>
</div>
<div class="h4 text-center">Überschrift</div>
</li>
<li class="col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
<div class="text-center">
<span class="psicon-service-bell icon-4x text-primary" aria-hidden="true"></span>
</div>
<div class="h4 text-center">Überschrift</div>
</li>
</ul>
Responsive Icon-Liste (xs: 2, sm: 3, md: 4, xl: 6 pro Zeile) mit Text