Font Awesome Unicode
Den Unicode für das 𝕏 (X) Icon bekommen wir so: e61b
, dem muss noch ein &#x
vorangestellt werden und kann dann z.b. so verwendet werden.
<!-- html --> <i icon=""></i>
Damit das so auch funktioniert, kommt noch dieser Snippet in die CSS Datei:
/* css */ [icon]:after { content: attr(icon); font-family: 'FontAwesome'; }
X und Threads Icons
Font Awesome hat in der Version 6.4.2 neue Icons hinzugefügt, unter anderem sind es diese brand
Icons:
- Twitter bzw. X und
- Threads von Facebook und
- Debian und Ubuntu
WhatsApp Text
Es gibt nur wenige Möglichkeiten, Texte in WhatsApp-Nachrichten zu formatieren bzw. zu stylen. Hier sind die vier, die ich auf die Schnelle gefunden habe.
Man fügt einfach ein bestimmtes Zeichen vor und nach dem Wort oder dem Text ein.
- Der Text wird *Fett*
- Der Text wird _Kursiv_
- Der Text wird ~
durchstrichen~ - Die Schriftart wird zu ```Monospace```
CSS - font-size
Beispiel Schriftgrößen
Schriftgröße | .classname |
---|---|
font-size: 1.0rem | .fs-10 |
font-size: 1.1rem | .fs-11 |
font-size: 1.2rem (default) | .fs-12 |
font-size: 1.3rem | .fs-13 |
font-size: 1.4rem | .fs-14 |
font-size: 1.5rem | .fs-15 |
font-size: 1.6rem | .fs-16 |
font-size: 1.7rem | .fs-17 |
font-size: 1.8rem | .fs-18 |
font-size: 1.9rem | .fs-19 |
font-size: 2.0rem | .fs-20 |
CSS - font-weight
Beispiel Schriftstärken
Schriftstärke | .classname |
---|---|
font-weight: 100 (default) | .fw-100 |
font-weight: 200 | .fw-200 |
font-weight: 300 | .fw-300 |
font-weight: 400 | .fw-400 |
font-weight: 500 | .fw-500 |
font-weight: 600 | .fw-600 |
font-weight: 700 | .fw-700 |
font-weight: 800 | .fw-800 |
font-weight: 900 | .fw-900 |
CSS - font-family
Ich habe die Google-Fonts gelöscht (kein berechtigte Interesse) und mit system-ui
eine sehr gute Alternative gefunden.
Mit font-weight 100 hab ich ein sehr dünnes Schriftbild wie z.b. bei Roboto (100) und mit font-weight 900 ist der Text auch fett genug, so das ich auch die Schriftart Anton nicht mehr brauche.
Ein weiterer Schritt in Richtung die Ladezeit einer Seite zu verbessern.
Logbuch 05032022
Ach da war doch was, wie sieht denn das progress
Tag im Darkmode aus? Ja nicht hier, hier ist alles noch Lightmode.
4CMS v1.6 | ||
Font Awesome 6 | ||
CSS Darkmode |
Update: 05.03.2022 - Logbuch
Font Awesome Icons
Hier nur ein paar der 120 neuen Icons aus der Version 5.13.0
Link: https://fontawesome.com
Font Awesome v5.2.0 - How to Use
In einem HTML Dokument.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
Oder via @import in der CSS Datei.
@import url(https://use.fontawesome.com/releases/v5.2.0/css/all.css);
Externe Datensammler
Beim Besuch dieser Homepage sollen keinerlei personenbezogene Daten gesammelt und an externe Dienste weitergeleitet werden. Daher werde ich jetzt alle externen Dienste verbannen und durch eigene Funktionen ersetzen.
Externe Datensammler waren unter anderem:
Font Awesome 5.0.9
Font Awesome 5.0.9 ist raus.
Es gibt wieder neue Icons, 291 Icons wurden dem Set hinzugefügt.
Die kostenlose Version bekommt auch ein paar davon ab, es sind zwar nur 86 Stück, aber mit jetzt insgesamt 989 Icons mehr als genug.
Link: https://fontawesome.com
Font Awesome 4.6.2
Font Awesome 4.6.2 ist seit ein paar Tagen raus und bringt wieder einige neue Icons mit. In der Summe kommt das ganze Set auf nunmehr 632 Icons.
Font Awesome 4.5
Das Icon-Font und CSS Toolkit Font Awesome ist aktuell in Version 4.5 erschienen und bringt wieder 20 neue Icons mit.
Darunter auch das für den Edge . Zudem wurden auch diverse Google Icons auf den neusten Stand gebracht.
Font Awesome 4.4.0
Das Icon-Font und CSS Toolkit Font Awesome ist in Version 4.4.0 erschienen und bringt z.b. 66 neue Icons mit.
Androidfont
Android Brand Icon
fab fa-android fa-5x
Animierte Icon-Fonts
Use the fa-spin
class to get any icon to rotate:
Schriftarten Testen
Web-Fonts vor dem Einbau Live Testen ?
Auf TypeWonder (eng.) gibt man nur die URL einer Homepage ein, wählt eine der reichlich verfügbaren kostenlosen Schriftart aus und schon sieht man in einer Live-Vorschau wie sich diese Schriftart auf der ganzen Seite machen würde.
CSS Webfont Icons
Ich wollte auch mal solche Webicons für mein 4CMS.
Warum nicht das Icon-Set von Font Awesome.
Hier stehen mehr al 479 unterschiedliche Icons zur Auswahl die sich leicht einbauen lassen.
CSS - buttons
HTML & CSS
HTML5 Tags!
code
q
em
strong
cite
samp
var
u
s
del
ins
span
small
abbr
sub
sup
mark
kbd
#link
Extern.
Intern.
orange
style
🄬️ fs-20
Für mein 4CMS das ich hier auf butschy.de verwende, versuche ich ein möglichst schlankes und klassenloses (classless) CSS Framework zu bauen.
Für eine Live Vorschau nutze ich ein Pen auf Codepen,