Atom Syntax Thema

Question

Ist es möglich, benutzerdefinierte Schriftart oder Bilder in Ihrem Atom-Thema zu haben? Ich habe die Font-Datei in Stile Ordner meines Thema setzen und CSS erstellt, aber ich erhalte einen Pfad Fehler:

Failed to load resource: net::ERR_FILE_NOT_FOUND file:///usr/share/atom/resources/app.asar/static/font.ttf

ui-variables.less

@font-face { 
    font-family: font; 
    src: url('./font.ttf'); 
} 

Answer 1

Nach this discussion und How do I load google fonts into my editor’s styles?.

Es gibt zwei Möglichkeiten, um Ihr Problem zu lösen,

Sie können Ihre ttf Datei setzen in Ihre Stile Ordner und Ihren Weg zum atom://your-package-name/resources/your-font.woff(for instance) aktualisieren.

Oder Löschen Sie die Font-Datei in den statischen Ordner:

/Applications/Atom.app/Contents/Resources/app/static 

Dann können Sie es auf diese Weise verwenden, und dann in meinem styles.less fügte ich die font-face:

@font-face { 
    font-family: dejavu; 
    src: url('dejavu/ttf/dejavusansmono.ttf'); 
} 

html, body, .editor { 
    font-family: dejavu; 
} 

:)

Answer 2

Wenn Sie suchen eine alternative Schriftart in der Syntax oder UI-Thema verwenden Tylers Lösung ist der einfachste Ansatz.
Wenn Sie jedoch mit "benutzerdefinierten Bildern" ein benutzerdefiniertes Dateisymbol zu einem UI-Thema hinzufügen möchten, ist die Implementierung ein wenig komplizierter. Im Grunde benötigen Sie eine Symbolschrift, die die Bilder enthält, die Sie einfügen möchten, und überschreibt die von Atom verwendeten Standardsymbole. Sie können eine vorhandene Schriftart wie FontAwesome verwenden oder Sie können etwas wie IcoMoon verwenden, um Ihre eigene benutzerdefinierte Symbolschrift von SVGs zu erstellen.
Wie beim Überschreiben der Standardsymbole von Atom würde der einfachste Weg, die erforderlichen Selektoren und das Styling zu finden, wahrscheinlich auf die Implementierung eines vorhandenen Themas verweisen. Fühlen Sie sich frei, mein UI-Thema Atomic Design UI zu überprüfen, wo ich eine Symbolschrift verwendet habe, um benutzerdefinierte Dateisymbole den Registerkarten und der Baumansicht hinzuzufügen.

• styles/icon-font.less
• styles/icon-variables.less
• styles/icons.less