Ich benutze FontAwesome mit ExtJS in meiner App.
Alle anderen Tasten funktionieren gut mit der Schriftart, wenn ich das tue:
%Vor%Zum Beispiel.
Wenn Sie jedoch dieselbe Konfiguration in der Aktionsspalte verwenden (Komponente, mit der Sie die pu-Schaltflächen in einem Grid aktivieren können), wird das Symbol einfach nicht angezeigt.
Hat jemand eine Idee warum?
BEARBEITEN
Nachdem Sie @qdev versucht haben zu antworten: Ich sehe gerade ein? # f040; Text gerendert (in blau).
Der generierte HTML-Code für die Aktionsspalten-Schaltfläche:
%Vor%CSS (aus Feuerbuh-Inspektor genommen):
%Vor% Dies liegt daran, dass Spaltensymbole für die Grid-Aktion als IMG -Tags dargestellt werden, wobei das Symbol (Pfad) als Option akzeptiert wird.
Um dies nutzen zu können, müssen Sie die Methode Ext.grid.column.Action *defaultRenderer* überschreiben, um neben dem Symbol die Option glyph config zu unterstützen (und auf Ihrem Code können Sie entscheiden, dass Sie das Symbol% co_de% oder% co_de verwenden % für jede Aktion in einer beliebigen Ansicht).
Das funktioniert (getestet auf ExtJS 5.0.1, aber ich denke, es funktioniert auch auf ExtJS 4) Code für diese Überschreibung:
%Vor% Wenn Sie nicht wissen, wohin Sie es laden oder laden sollen, können Sie es im Internet finden, aber auf einer sencha cmd generierten App geben Sie es einfach in img ein und werden automatisch vom Framework geladen.
Dann müssen Sie ein wenig CSS ein wenig anpassen (ich habe in meinem benutzerdefinierten CSS für das Hauptfenster hinzugefügt). Ohne dies werden Sie die Glyphen NICHT sehen, ich nehme an, Sie werden verstehen, warum Sie den folgenden Code betrachten:
%Vor%Es ist mir auch gelungen, einen weiteren netten Trick zu machen: Aktionssymbole werden standardmäßig für alle Zeilen ausgeblendet und nur in der Zeile / dem Datensatz angezeigt, der bzw. das verschoben wurde.
Sie können auswählen, wo Sie dies verwenden möchten, nur für die Ansichten, die Sie verwenden möchten, indem Sie die Konfigurationsoption getClass des Symbols / Glyph verwenden, indem Sie glyph (bei älteren ExtJS-Versionen appFolder/overrides/grid/column/Action.js ) wie folgt hinzufügen:
... und dann zeigen Sie alle Symbole für die hovered / ausgewählte Zeile nur mit CSS an:
%Vor%Ich hoffe, das hilft dir;)
Ich füge getGlyph ( ähnlich getClass für Icons ) zu qdev hinzu. Es ist eine sehr einfache Lösung, funktioniert aber perfekt.
Ist nur 3 Zeilen hinzufügen tun qdev Lösung:
%Vor%Vollständig überschreibt den Code:
%Vor%Sie können es so einfach wie:
verwenden %Vor%Ich hoffe, das hilft dir;)
Ich habe vor Kurzem diese neue App erstellt, mit der Sie benutzerdefinierte Symbole vorbereiten können, die Sie iconCls zuweisen können. Es erzeugt die _icons.scss Datei für deine Sencha Apps. Ich habe es nur mit Sencha Touch getestet, aber ich denke es sollte auch mit ExtJS funktionieren. Die README erläutert die Schritte zum Erstellen von Symbolen auf der Ico Moon-Website und zum Konvertieren von Ico Moon-Projektdateien in SCSS zur Verwendung in Sencha. Es wurde auch mit Sencha Architect Touch-Projekten getestet.
Wenn Sie es für ExtJS verwenden, sagen Sie mir bitte, ob es funktioniert. Danke.
Sieht so aus, als ob die Überschreibungen nicht funktionieren, wenn Sie in 4.0 - 4.1 sind. Ich ging den Weg des geringsten Widerstandes und machte einfach die Icons über Ссылка ins PNG-Format und definierte dann die zugewiesene Klasse zu einer Hintergrundbild-URL in der CSS .
Tags und Links css ruby-on-rails extjs font-awesome