Als «font-awesome» getaggte Fragen

Font Awesome ist eine eigenständige Vektorschrift, die ursprünglich für die Verwendung mit dem Twitter Bootstrap-Front-End-Framework entwickelt wurde.



29
Font awesome zeigt kein Symbol an
Ich verwende Font Awesome und möchte kein CSS mit HTTP hinzufügen. Ich habe Font Awesome heruntergeladen und in meinen Code aufgenommen, aber Font Awesome zeigt ein umrandetes quadratisches Feld anstelle eines Symbols an. Hier ist mein Code: <html> <head> <link rel="stylesheet" href="../css/font-awesome.css"> <link rel="stylesheet" href="../css/font-awesome.min.css"> </head> <body> <div style="font-size: 44px;"> …
99 html  css  font-awesome 

15
So fügen Sie ein Font Awesome-Symbol in Reacts Rendering ein ()
Immer wenn ich versuche, ein Font Awesome-Symbol in React's zu verwenden render(), wird es nicht auf der resultierenden Webseite angezeigt, obwohl es in normalem HTML funktioniert. render: function() { return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>; } Hier ist ein Live-Beispiel: http://jsfiddle.net/pLWS3/ Wo ist der Fehler?

4
Wie stelle ich sicher, dass jeder Buchstabe die gleiche Breite hat?
Ich habe festgestellt, dass es auch bei gleicher Schriftgröße keine Standardbreite gibt. Wie kann ich diese vor einer Liste von Elementen verwenden, damit die Wörter nicht gezackt erscheinen? Screenshot des Problems: Dies ist der Code: <ul id="myTab"> <li class="active"><a href="#home"><i class="icon-tasks"></i> Proposal</a></li> <li><a href="#video"><i class="icon-film"></i> Videos</a></li> <li><a href="#asset"><i class="icon-paper-clip"></i> Assets</a></li> …

6
Drehen Sie statisch beeindruckende Symbole statisch
Ich möchte meine Schriftarten-Symbole statisch um 45 Grad drehen. Auf der Website heißt es: Verwenden Sie die Klassen fa-rotate- * und fa-flip- *, ​​um Symbole willkürlich zu drehen und umzudrehen. Allerdings tun <i class="fa fa-link fa-rotate-45" style="font-size:1.5em"></i> funktioniert nicht, während das Ersetzen fa-rotate-45durch fa-rotate-90. Bedeutet dies, dass sie sich tatsächlich …

8
Wie füge ich dem Eingabefeld ein Font Awesome-Symbol hinzu?
Wie verwende ich das in Font Awesome enthaltene Suchsymbol für die Eingabe? Ich habe eine Suchfunktion auf meiner Website (basierend auf PHPmotion), die ich für die Suche verwenden möchte. Hier ist der Code: <div id="search-bar"> <form method="get" action="search.php" autocomplete="off" name="form_search"> <input type="hidden" name="type" value="videos" /> <input autocomplete="on" id="keyword" name="keyword" value="Search …
88 html  css  font-awesome 

8
Extrahieren von SVG aus Font Awesome
Ich möchte die SVG-Pfaddaten von Font Awesome- Glyphen abrufen, damit ich sie direkt als SVG in meinem HTML-Code verwenden kann. Ich dachte, es wäre so einfach wie das Kopieren und Einfügen der Pfaddaten aus fontawesome-webfont.svg , aber wenn ich es in meinem HTML verwende, werden alle Symbole verkehrt herum gerendert …
87 html  svg  font-awesome 

7
Schriftart optimieren Genial für nur verwendete Klassen
Ich verwende die Font Awesome Sass-Datei https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass , um sie zu _font-awesome.sass zu machen, damit ich sie @importin meinem Sass-Projekt verwenden kann. Ich verwende auch http://middlemanapp.com/ , um Sass in Css zu konvertieren . Fragen: Gibt es eine Möglichkeit, nur verwendete Symbolklassen in meine konvertierte CSS-Datei zu integrieren? Weil es …
86 css  sass  font-awesome 

9
Wie lade ich font-awesome mit SCSS (SASS) in Webpack unter Verwendung relativer Pfade?
Ich habe font-awesome in meinem Ordner node_modules, also versuche ich, es wie folgt in meine .scss-Hauptdatei zu importieren: @import "../../node_modules/font-awesome/scss/font-awesome.scss"; Die Kompilierung der Webpack-Bündelung schlägt jedoch fehl Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot da die Datei font-awesome.scss auf den relativen Pfad '../fonts/' verweist. Wie kann ich scss \ webpack …


5
Alt- oder Titelattribut für i-Tag
Ich benutze font-awesome und zeige ihre Schriften so an: <i class="icon-lock"></i> Dies zeigt ein schönes kleines Schlosssymbol an. Damit der Benutzer genau weiß, was das bedeutet, habe ich versucht, Attribute wie title und alt hinzuzufügen, aber ohne Erfolg. Gibt es ein Attribut, das ich für das <i>Tag verwenden kann, das …

8
Woher wissen Sie, ob eine Schriftart (@ font-face) bereits geladen wurde?
Ich verwende Font-Awesome, aber während die Schriftdateien nicht geladen sind, werden die Symbole mit  angezeigt. Ich möchte also, dass diese Symbole angezeigt werden, display:nonewährend Dateien nicht geladen werden. @font-face { font-family: "FontAwesome"; src: url('../font/fontawesome-webfont.eot'); src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg'); font-weight: normal; font-style: normal; } Woher …

10
Font-Awesome Fehler 404 bei Schriftarten
Ich weiß nicht, was los ist, aber in der Browserkonsole sehe ich 3 Fehler im Zusammenhang mit font-awesome GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff2?v=4.3.0 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff?v=4.3.0 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.ttf?v=4.3.0 Ich weiß, dass es lächerlich ist, ich kann das nicht selbst herausfinden, aber alles scheint in Ordnung zu sein, in meiner index.html habe ich so etwas …

8
Verwenden Sie FontAwesome oder Glyphicons mit css: before
Gibt es eine Möglichkeit, HTML in das CSS- content:Element einzubetten, wenn ein :beforePseudoelement verwendet wird? Ich möchte eine Font Awesome (oder Glyphicon) in einem Anwendungsfall wie diesem verwenden: h1:before { content: "X"; padding-right: 10px; padding-left: 10px; color: @orangeLight; } Wo Xist so etwas <i class="icon-cut"></i>. Ich kann dies natürlich manuell …

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.