アトムの構文テーマ

Question

アトムテーマでカスタムフォントや画像を使用することはできますか？ 私は私のテーマと作成したCSSのスタイルフォルダにフォントファイルを入れているが、私はパスのエラーを取得：

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

this discussionによると、 How do I load google fonts into my editor’s styles?。あなたの問題を解決する方法は2つあります

、

は、あなたのスタイルがフォルダにあなたのTTFファイルを入れて、atom://your-package-name/resources/your-font.woff(for instance)にあなたのパスを更新することができます。静的フォルダに

それとも ドロップフォントファイル：

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

その後、あなたはこの方法でそれを使用することができ、 その後、私のstyles.lessに私がフォントフェースを追加しました：

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

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

：）

Answer 2

あなたの構文やUIをテーマに、代替フォントを使用することを探しているならタイラーのソリューションは最も簡単なアプローチです。
「カスタムイメージ」では、UIテーマにカスタムファイルアイコンを追加することを意図していますが、その実装はかなり複雑です。基本的には、インクルードする画像を含むアイコンフォントが必要で、Atomで使用されるデフォルトのアイコンを上書きする必要があります。 FontAwesomeのような既存のフォントを使うこともできますし、IcoMoonのようなものを使ってSVGから独自のカスタムアイコンフォントを作成することもできます。
Atomのデフォルトのアイコンをオーバーライドするために、必要なセレクタとスタイリングを見つける最も簡単な方法は、おそらく既存のテーマの実装を参照することです。私のUIテーマであるAtomic Design UIをチェックしてみてください。ここでアイコンフォントを使ってタブやツリービューにカスタムファイルアイコンを追加しました。アイコンの実装と書式は以下のファイルで見つけることができます。/ usr /共有/原子にはテーマのものが存在しない

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