static - UIkit

Artikel vom 14. Dezember 2023

Documentation

FFW Webfont Icons

Code: <span class="ico"><i class="ffw-maske" style="font-size:60px; vertical-align:-10px; color: #000;"></i></span>

Das ist ein FFW Webicon

Liste FFW Webfont Icons

Code: <i class="ffw-schneidgeraet" style="font-size:50px; vertical-align:middle; color:#333333;"></i>

Das ist ein FFW Webicon blinkend

Code: <i class="ffw-logo-maebenberg-klein blink" style="font-size:80px; vertical-align:middle; color:#333333;"></i>

Hinweistext: JEvents

entfällt !

Code: <span style="color:red"><i class="ffw-cancel-circle"></i> <b>entfällt !</b></span>

neues Datum !

Code: <span style="color:red"><i class="ffw-calendar"></i> <b>neues Datum !</b></span>

neue Zeit !

Code: <span style="color:red"><i class="ffw-alarm blink"></i> <b>neue Zeit !</b></span>

unter Vorbehalt!

Code: <span style="color:red"><i class="ffw-spinner9 uk-icon-spin"></i> <b>unter Vorbehalt!</b></span>

Anreisser Überschrift mit grauem/roten Balken

Überschrift mit Anreisserbalken grau

Code: <h5 class="uk-ffw-bar-grey">Überschrift mit Anreisserbalken</h5>

Überschrift mit Anreisserbalken rot

Code: <h5 class="uk-ffw-bar-red">Überschrift mit Anreisserbalken</h5>

Klappt mit allen Tags, Klasse ist nicht auf h4 beschränkt.

Link Button

Download

Code: <a href="#" target="_blank" rel="noopener" class="btn btn-sm btn-primary"><i class="ffw-download"></i> Download</a>

UI-Kit Dokumentation

Code: <a href="#" target="_blank" rel="noopener" class="btn btn-sm btn-primary ><i class="fa-solid fa-arrow-up-right-from-square"></i> Link Text</a>

H1 Heading

Welcome to our wonderful world. We sincerely hope that each and every user entering our website will find exactly what he/she is looking for. With advanced features of activating account and new login widgets, you will definitely have a great experience of using our web page.

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Font Awesome

List of Fontawesome Icons

fa-gifts

Code: <i class="fa-solid fa-gifts fa-5x"></i>

UiKit 3 Icons

home
sign-in
sign-out
user
users
lock
unlock
settings
cog
nut
comment
commenting
comments
hashtag
tag
cart
credit-card
mail
receiver
print
search
location
bookmark
code
paint-bucket
camera
video-camera
bell
microphone
bolt
star
heart
happy
lifesaver
rss
social
git-branch
git-fork
world

calendar
clock
history
future
pencil
trash
move
link
question
info
warning
image
thumbnails
table
list
menu
grid
more
more-vertical
plus
plus-circle
minus
minus-circle
close
check
ban
refresh
play
play-circle
tv
desktop
laptop
tablet
phone
tablet-landscape
phone-landscape

file
file-text
file-pdf
copy
file-edit
folder
album
push
pull
server
database
cloud-upload
cloud-download
download
upload
reply
forward
expand
shrink
arrow-up
arrow-down
arrow-left
arrow-right
chevron-up
chevron-down
chevron-left
chevron-right
chevron-double-left
chevron-double-right
triangle-up
triangle-down
triangle-left
triangle-right

bold
italic
strikethrough
quote-right
500px
behance
dribbble
etsy
facebook
flickr
foursquare
github
github-alt
gitter
google
google-plus
instagram
joomla
linkedin
pagekit
pinterest
reddit
soundcloud
tripadvisor
tumblr
twitter
uikit
vimeo
whatsapp
wordpress
xing
yelp
youtube

Code:
Icon:  <i uk-icon="icon: youtube"></i>
Blinkendes Icon:  <i class="blink" uk-icon="user"></i>

UIkit Documentation für Icons

Link Style

Code: <a class="uk-icon-link" href="#" uk-icon="icon: youtube"></a>

Button Style

Code: <a class="uk-icon-button" href="#" uk-icon="icon: youtube"></a>

Blockquote

Real estate cannot be lost or stolen, nor can it be carried away. Purchased with common sense, paid for in full, and managed with reasonable care, it is about the safest investment in the world.

Franklin D. Roosevelt

Code: <blockquote class="bg-light border rounded p-3">Text</blockquote>

List Style

Unordered List

Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.

Ordered List

Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.

Icons in a List

Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.

Image Centered

Buttons

Code: <button type="button" class="btn btn-primary btn-sm">Buttontext</button>

Sizes

Button group

For syntax check quellcode !

Aktuelle Artikel