Test neues UIkit & Bootstrap & Font Awesome

Icons UIkit 3.11.1

  Mail | <a uk-icon="mail"></a>
  Link | <a uk-icon="link"></a>
  Download | <a uk-icon="download"><>/a>
  VideoKamera | <a uk-icon="video-camera"></a>
  Youtube | <a uk-icon="youtube"></a>
  World | <a uk-icon="icon: world"></a>ybr />
  Telefon| <an uk-icon="receiver"></a>
 Fax | <a uk-icon="print"></a>
 Handy | <a uk-icon="phone"></a>
 Handy quer | <a uk-icon="phone-landscape"></a>
 Tablet | <a uk-icon="tablet"></a>
 Tablet quer | <a uk-icon="tablet-landscape"></a>
 Laptop | <a uk-icon="laptop"></a>
 Bildschirm | <a uk-icon="desktop"></a>
 Fernseher | <a uk-icon="tv"></a>
 PDF-Datei | <a uk-icon="filet-pdf"></a>
 Uhr | <a uk-icon="clock"></a>
 Kalender | <a uk-icon="calendar"></a>
>UIkit Alternative: statt <a></a> <span></span> verwenden

Icon Button <span class="uk-icon-button uk-icon-clock"></span>
normal <span class="uk-icon-clock"></span>
ratio=1 <span class="uk-icon-clock"></span>
ratio=2 <span class="uk-icon-clock uk-icon-small"></span>
ratio=2.5 <span class="uk-icon-clock uk-icon-large"></span>
ratio=3 <span class="uk-icon-clock uk-icon-medium"></span>

 <div class="spinner-grow" role="status"></div>

 <div class="spinner-grow text-info" role="status"></div>

 <div class="spinner-grow text-warning" role="status"></div>

 <div class="spinner-grow text-danger" role="status"></div>

<div uk-spinner></div>>

Icons Font Awesome 6.0

 Pointing Hand rechtst | <i class="fa-regular fa-hand-point-right"></i>
 Postanschrift | <i class="fa-regular fa-envelope"></i>
 Postanschrift | <i class="fa-solid fa-envelope"></i>
 E-Mail | <i class="fa-solid fa-at"></>
 Person | <i class="fa-regular fa-user"></i>
 Schloss | <i class="fa fa-lock"></i>
  Word-Datei | <i class="fa-regular fa-file-word"></i>
  Excel-Datei | <i class="fa-regular fa-file-excel"></i>
  Powerpoint-Datei | <i class="fa-regular fa-file-powerpoint"></i>
  Bild | <i class="fa-regular fa-image"></i>
  Bilder | <i class="fa-regular fa-images"></i>
  Uhr | <i class="fa-regular fa-clock"></i>
  Kalender | <i class="fa-solid fa-calendar"></i>
  Kalender | <i class="fa-regular fa-calendar"></i>
  Kalender | <i class="fa-solid fa-calendar-check"></i>
  Kalender | <i class="fa-regular fa-calendar-check"></i>
  Kalender | <i class="fa-solid fa-calendar-xmark"></i>
  Kalender | <i class="fa-regular fa-calendar-xmark"></i>
 Fax | <i class="fa fa-fax"></i>
<i class="fa-solid fa-fax"></i>
 Telefon | <i class="fa fa-phone"></i>
 Tablet | <i class="fa fa-tablet-button"></i>
 Laptop | <i class="fa fa-laptop"></i>
 Desktop | <i class="fa fa-desktop"></i>
 Fernseher | <i class="fa fa-tv"></i>
 Handy | <i class="fa fa-mobile"></i>
 IPhone | <i class="fa fa-mobile-button"></i>
 Uhr | <i class="fo-solid fa-clock"></i>

<i class="fa fa-clock" ></i>
<i class="fa fa-clock fa-lg"></i>
<i class="fa fa-clock fa-2x"></i>
<i class="fa fa-clock fa-3x"></i>
<i class="fa fa-clock fa-4x"></i>
<i class="fa fa-clock fa-5x"></i>

<i class="fa fa-spinner fa-spin fa-lg"></i>
<i class="fa fa-spinner fa-pulse fa-lg"></i>
<i class="fa fa-circle-o-notch fa-spin fa-lg"></i> 
<i class="fa fa-refresh fa-spin fa-lg"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-cog fa-spin fa-lg"></i>
<i class="fa fa-cog fa-spin fa-2x"></i>
<i class="fa fa-cog fa-spin fa-lg fa-2x"></i>

 <a uk-icon="icon: home"></a>
 <span uk-icon="icon: home"></span>
 <span uk-icon="home"></span>
 <i class="fa fa-home"></i>
 <i class="fa-solid fa-home"></i>
 <i class="fa-solid fa-house"></i>
 <i class="fa-solid fa-house-chmney"></i>
<a class="uk-icon-button" uk-icon="home"></a>  

Tooltip

<div uk-tooltip="Hallo World"></div>

Hoover me

Test AlertD

<div class="alert alert-primary" role="alert">A simple primary alert—check it out!</div>

Test Badge

Primary Secondary Success Danger Warning Info Light

<span class="badge badge-primary">Primary</span>: Primary

<a href="#" class="badge badge-primary">Primary</a>: Primary

Telefon

  +49 571 82971-0
<span title="Telefon" data-uk-tooltip><a class="uk-icon-button" uk-icon="receiver"></a>
<a class="badge badge-primary"> ... </a></span>

Fax

  +49 571 82971-29
<span title="Fax" data-uk-tooltip><a class="uk-icon-button" uk-icon="print"></a>
<a class="badge badge-success"> ... </a></span>

E-Mail

  Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein.
<span title="E-Mail" data-uk-tooltip><a class="uk-icon-button" uk-icon="mail"></a>
<a href="mailto: ... " class="badge badge-primary"> ... </a></span>

Link

  Homepage der KTG
<span title="Link" data-uk-tooltip><a class="uk-icon-button" uk-icon="link"></a>
<a href="/ ... " class="badge badge-success"> ... </a></span>

Download

  Satzung des Fördervereins
<span title="Download" data-uk-tooltip><a class="uk-icon-button" uk-icon="download"></a>
<a href="/ ... " class="badge badge-info"> ... </a></span>

Video

  Satzung des Fördervereins
<span title="Video" data-uk-tooltip><a class="uk-icon-button" uk-icon="video-camera"></a> 
<a href="/ ... " class="badge badge-warning"> ... </a></span>

Youtube

  Sandbienen
<span title="Youtube" data-uk-tooltip><a class="uk-icon-button" uk-icon="youtube"></a> 
<a href="/ ... " class="badge badge-danger"> ... </a></span>

UIKit buttons

<button class="uk-button uk-button-primary">Primary</button>

Default Primary Secondary Danger Text Link

UIKit labels

GROSSBUCHSTABEN dutch CSS erzwungen!!!
<span class="uk-label label-success">Success</span>

Default Success Warning Danger

lt;span title="Youtube" data-uk-tooltip><a class="uk-icon-button" uk-icon="youtube"></a> 
<a href="/ ... " class="uk-label uk-label-danger"> ... </span></span>

Bootstrap buttons

<button type="button" class="btn btn-primary">Primary</button>

Primary Secondary Success Danger Warning Info Light Dark Link

Test bootstrap small buttons

<button type="button" class="btn btn-primary btn-sm">Primary</button>

Primary Secondary Success Danger Warning Info Light Dark Link

Postanschrift

Kurt-Tucholsky-Gesamtschule | Königswall 10 | 32423 Minden
<span title="Postanschrift" data-uk-tooltip><a class="uk-icon-button" uk-icon="home"></a>
<button class="btn btn-light btn-sm"> ... </button></span>

Telefon

  +49 571 82971-0
<span title="Telefon" data-uk-tooltip><a class="uk-icon-button" uk-icon="receiver"></a>
<button class="btn btn-primary btn-sm"> ... </button></span>

Fax

  +49 571 82971-29
<span title="Fax" data-uk-tooltip><a class="uk-icon-button" uk-icon="print"></a>
<button class="btn btn-secondary btn-sm"> ... </button></span>

E-Mail

  Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein.
<span title="E-Mail" data-uk-tooltip><a class="uk-icon-button" uk-icon="mail"></a>
<button class="btn btn-success btn-sm"><a href="mailto: ... "> ... </a></button></span>

Link

  Homepage der KTG
<span title="Link" data-uk-tooltip><a class="uk-icon-button" uk-icon="link"></a>
<button class="btn btn-warning btn-sm"><a href="/ ... "> ... </a></button></span>

Download

  Satzung des Fördervereins
<span title="Download" data-uk-tooltip><a class="btn btn-danger btn-sm"></a>
<button class="uk-label uk-label-warning"><a href="/ ... "> ... </a></button></span>

Video

  Satzung des Fördervereins
<span title="Video" data-uk-tooltip><a button class="btn btn-light btn-sm"></a> 
<button class="btn btn-info btn-sm"><a href="/ ... "> ... </a></button></span>

Youtube

  Sandbienen
<span title="Youtube" data-uk-tooltip><a class="uk-icon-button" uk-icon="youtube"></a> 
<button class="btn btn-info btn-sm"><a href="/ ... "> ... </a></button></span>

UIKit labels

<span class="uk-label uk-label-success">Success</span>

Default Success Warning Danger