質問: Font Awesomeを利用して、アイコンを表示しようとしています。 クライアントの都合で、にアイコンを出す必要があり、かつinputのvalueにはシステムのサニタイズのためか、\f061やは使用できないため、inputのbackgroundにsvgを表示する方法を検討しています。 Font Awesomeが配布しているfontawesome-webfont.svgはAdobe Illustratorで確認できるような画像群ではなく、svgのコードが列挙されているようなのですが、ここから単品だけを抜き出してinputのbackgroundとして利用することは可能でしょうか? それともfontawesome-webfont.svgはこちらでわざわざツールなどで1アイコンずつに分離しないと利用できないファイルなんでしょうか。 詳しい方いらっしゃいましたら、よろしくお願いいたします。
回答: SVGはただのテキストファイル(XMLファイル)ですので、適当なテキストエディタで編集することが可能です。できそうな方法を二つ紹介します。 1. ``の部分以外の``と``を削除し、適当な``を追加する。 もともと`...`はSVG内で使うフォントの設定であるため、その本来の使い方をします。ただ、何かが足りないのか私はうまく作れませんでした。下記の参考ページによると旧Opera以外では動かないようですので、この方法は難しいかも知れません。 参考: 16.フォント定義 - svg要素の基本的な使い方まとめ 2. ``を``に変えて使う。 文字(glyph)もただの線(path)です。線の定義であるd属性の書き方も同じです。ですので、そのまま``にしてしまいます。 一応chromeでSVG単体はうまく表示できました。 ということで、するのであれば2.の方法でしょうか。とりあえずサンプルを下に載せます。 ``` ``` 実寸大ははかなり大きいですので、大きさ等は適当に変更してください。ベクトル画像のため、SVG上で縮小しても綺麗なままです。カスタマイズにはSVGの知識はそれなりに必要になりますが、ここまで来ればAdobe Illustratorでも直接編集できると思います。 なお、フォントの一つ一つの文字も著作権で保護されています。FontAwesome Licenseを参照の上、どこかでライセンス提示を行うこと(通常のFontAwesomeではCSS内で提示している)、作られたSVGもコピーレフトの制限を受ける場合があることに注意してください。