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>
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>
<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>
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>
Test bootstrap small buttons
<button type="button" class="btn btn-primary btn-sm">Primary</button>
Postanschrift
<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
<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
<span title="Fax" data-uk-tooltip><a class="uk-icon-button" uk-icon="print"></a>
<button class="btn btn-secondary btn-sm"> ... </button></span>
<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