【blogger】アイコンフォントの代わりにSVGアイコンを使ってみた
おしゃれなブログで必ずといっていいほど使われているアイコンフォント。
ブログの一番大事なところはもちろん記事（写真+文）ですが、アイコンフォントが適度に入っていると、見た目に楽しいですよね。私も自分のブログに取り入れたくて試行錯誤を繰り返していたのですが、どうしてもうまく表示させることができず断腸の思い（おおげさ）で導入をあきらめました。
で、何か代わりになるものはないだろうか…と探してたどりついたのがオープンソースのSVGアイコンだったのです。
私と同じように、アイコンフォントでつまずいてしまう人がいるのか分かりませんが、自分用の備忘録的に書いておこうと思います。
私の使っているテンプレートは、各記事の下にタグが挿入されます。
 |
| テンプレートのサンプル画像 |
テンプレートの設定では、タグの前にFontAwesomeの「fa fa-folder-open」が表示されるようになっていました（なぜfa fa-tagsでないのかは謎）。しかし、IEでは空白、Chromeでは豆腐のような四角に文字化けしてしまいました。
仕方なく「fa fa-folder-open」を削除して文字だけを表示していましたが、何だか不親切な感じがして、ずっと気になっていました。
フリーSVGアイコン「Feather」
CSSだけで作られたアイコンも試してみましたが、完成度に難ありで却下。
そんな時見つけたのが「Feather」でした。
Feather - Simply beautiful open source icons
Designed on a 24x24 grid with an emphasis on functionality, consistency and simplicity.
シンプルで丸っこくて、可愛いアイコンが240種類も選び放題です。
HTMLにインラインで直接書き込む方法
「Feather」のページで、使いたいアイコンをクリックすると、一見、真っ白なページが出てきます。
よくよく見ると左上に小さくアイコンが表示されています。
ページ上で右クリックし「ソースの表示」を選択します。
長～いソースが表示されますので、すべてコピーしHTMLの表示させたい部分にペーストします。
 |
| タグアイコンが表示できた！ |
…サイズはいいのですが、チョット位置がおかしいですね。
CSSで調整します。
Featherアイコンのクラス名は'feather'、アイコンごとの名前は'feather-○○'です。
ソースの中に「class="feather feather-tag"」と記入されています。
CSS
.feather-tag{
position: relative;
/* 値は調整してください */
top: 8px;
left: 0px;
}
position: relative;
/* 値は調整してください */
top: 8px;
left: 0px;
}
プレビューで確認しながら、二つの数字を変えてみます。
 |
| CSSで位置調整、色変更(fill:で指定)などが可能 |
いい感じになりました。
アイコンフォントと同じく、拡大してもぼやけないのが良いです。
フリーのSVGファイルは「Feather」以外にもたくさんありますので、自分好みのアイコンを探してみてください。
ポチっとよろしく♪
