Verwenden von Zahlen mit Font Awesome

Lesezeit: 4 Minuten

Benutzer-Avatar
rschonhoff

Ich möchte Zahlen verwenden, um Schritte in einem Prozess aufzulisten. Ich war neugierig, wie man das mit Font Awesome macht.

Ich möchte Kreise mit einer 1, 2, 3 … darin verwenden. Ist das möglich?
Wird Font Awesome der Liste der Symbole Zahlen hinzufügen?

Vielen Dank!

  • Bitte sagen Sie mir, ob Sie Ihr Problem gelöst haben. Ich habe danach gefragt, wie Zahlen in atilesitem angezeigt werden

    – Yagami-Licht

    30. März 2017 um 8:42 Uhr

Benutzer-Avatar
Lennart Stop

Font awesome hat es tatsächlich eingebaute Unterstützung zum Stapeln von normalem Text (dh Zahlen, Buchstaben, ..) auf Symbolen.

Hier ist ein schönes Beispiel für ein Kalendersymbol mit dem aktuellen Tag des Monats als Klartext. Wie der Beitrag auch erklärt, müssen Sie möglicherweise etwas zusätzliches Styling für eine optimale Positionierung einbringen.

HTML:

<span class="fa-stack fa-3x">
  <i class="fa fa-calendar-o fa-stack-2x"></i>
  <strong class="fa-stack-1x calendar-text">27</strong>
</span>

CSS:

.calendar-text { margin-top: .3em; }

Benutzer-Avatar
Sagar Ranglani

Der folgende Code ergibt a Kreis mit einer Zahl

<span class="fa-stack fa-3x">
  <i class="fa fa-circle-o fa-stack-2x"></i>
  <strong class="fa-stack-1x">1</strong>
</span>

Der folgende Code ergibt a ausgefüllter Kreis mit einer Zahl

<span class="fa-stack fa-3x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <strong class="fa-stack-1x text-primary">1</strong>
</span>

Hier die text-primary Klasse (aus Bootstrap) wird verwendet, um die Farbe der Zahl festzulegen

Benutzer-Avatar
Handelssüdwesten

Das Einfügen von Buchstaben und Zahlen würde das Stylesheet für FA viel zu groß machen und sie unterstützen es nicht ( https://github.com/FortAwesome/Font-Awesome/issues/5019 ). also was ich mache ist so:

.fa-alph {
font-family: Arial, sans-serif; /* your font family here! */
font-weight: bold;
color: #860000;
font-style: normal;   
}

dann

<button class="btn btn-default" type="button"><i class="fa-alph">2</i></button>

Dies hinterlässt eine schöne saubere Schriftart und Sie können immer noch das dumme i ( em ), um “Symbole” nachzuverfolgen. Außerdem bleiben dadurch alle Symboltypzeichen im selben elementaren Bereich … (.fa-^)

Ich glaube, dieser Thread war für ein Symbol mit einem Kreis darum. Sie würden also dieses CSS oben ändern, um es zu einem zu machen <span> anstelle einer <button> und erstellen Sie ein Blockelement in Ihrer Spannweite.

.f-circle {
font-family: Arial; /* your font family here! */
font-weight: bold;
display: block;
border: 1px solid #860000;
border-radius: 999px;
padding: 6px 12px;
}

dann

<span class="f-circle"><i class="fa-alph">2</i></span>

Benutzer-Avatar
Otobong Jerome

Du kannst stattdessen einfach so etwas tun:

<i class="fa fa-star" aria-hidden="true"> 1</i>
<i class="fa fa-star" aria-hidden="true"> 2</i> 
<i class="fa fa-star" aria-hidden="true"> 3</i> 
...

Ich finde, dass dies in WordPress-Widgets gut funktioniert (nach dem Hinzufügen des CDN-Styesheets zur Kopfzeile):

<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa-stack-1x fa-inverse">1</i>
</span>

Benutzer-Avatar
Benutzer3035649

Suchen Sie als Alternative zu Font Awesome und HTML/CSS ein Beispiel, das Ihnen gefällt, und erstellen Sie etwas Ähnliches in Photoshop. Exportieren Sie die PNGs. Dauert etwa 10 Minuten.

Benutzer-Avatar
Pancho

Nicht dass ich wüsste! Tatsächlich ist Font awesome eine Schriftart, die nur zum Rendern von Symbolen verwendet wird. Hier ist eine Liste möglicher Symbole Fontawesome-Icons.

Sie können dies auf viele andere Arten tun. Ich würde es mit einer dieser beiden anderen Methoden tun, je nachdem, wonach Sie suchen. Zum Beispiel…

Ein einfacher Kreis mit einer Zahl darin, der Weg, den ich gehen würde, wäre mit CSS, einen Kreis zu erstellen und normalen Text darin zu verwenden. Dazu gibt es unzählige Beiträge/Beispiele bei Google. Hier ist eine : wie erstelle ich kreise mit css

Wenn Sie dies mit etwas mehr Grafik / Symbol erreichen möchten, schlage ich vor, einen Blick darauf zu werfen Fontello, erstellt dies eine Schriftart aus Ihren eigenen SVG-Dateien. Sie können also Ihre eigenen Zahlen mit Bildern als Hintergrund erstellen und die Zahlen als Symbole rendern, genau wie es Fontawesome tut.

Lass es dir gut gehen!

Pancho

1256240cookie-checkVerwenden von Zahlen mit Font Awesome

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy