bUTschy.de

Suchen

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="&#xe61b;"></i>

Damit das so auch funktioniert, kommt noch dieser Snippet in die CSS Datei:

/* css */
[icon]:after {
  content: attr(icon);
  font-family: 'FontAwesome'; 
}

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.

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.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.

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.

Font Life Savers

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 math sub sup mark kbd #link Extern. Intern. orange style 🄬️ fs-20 Icon

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,