前回、ヘッダー部分の右側にWEBアイコンフォントを使ってフォローボタンを設置してみたことを記事にしました。
便利なWEBアイコンフォントですが、すべてのフォントデザインがそろっているわけではありません。今回の作業で気づいたことは、Font AwesomeのWEBフォントにfeedlyのアイコンフォントがないことです。FacebookやTwitterなど、WEB上でよく見かけるロゴのアイコンはありましたが、feedlyのものはありません。
でも、feedlyフォローボタンも置きたい。そこで、調べて結果、Simplicityの作者わいひら（yhira）さんがフォントを自作しているのを見つけました。
feedlyフォローボタンのWEBフォントデータの入手方法
自作のWEBアイコンフォントの作り方（無料ツールのみでfeedlyフォントを作る）
最近は、その便利さからWEBアイコンフォント（以下、アイコンフォント）を利用したサイトが増えています。 アイコンフォントは、CSSで色や大きさを指定出来るし、画像と違い大きさが変わったからといって、表
nelog.jp
まず、このサイト公開されているfontデータをダウンロードします。それから、サーバー上でSTINGER５のstyle.cssを置いているフォルダーにインストールしました。
style.cssとheader.phpの記述内容の変更
style.cssに追加した記述
次に行ったことは、このサイトに書いてあった次のstyle.cssをSTINGER5のstyle.cssに追加することです。
[html]
@font-face {
font-family: ‘icomoon’;
src:url(‘fonts/icomoon.eot?t154j0’);
src:url(‘fonts/icomoon.eot?#iefixt154j0’) format(‘embedded-opentype’),
url(‘fonts/icomoon.woff?t154j0’) format(‘woff’),
url(‘fonts/icomoon.ttf?t154j0’) format(‘truetype’),
url(‘fonts/icomoon.svg?t154j0#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: ‘icomoon’;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-feedly:before {
content: "\e600";
}
.icon-feedly-square:before {
content: "\e601";
}
[/html]
header.phpに追加した記述
その後、feedlyアイコンが表示できるように、header.phpに次の記述を追加しました（ブログのURLはご自身のものに書き換えてくださいね）。
[html]
<li><a href="http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fbibalogue.com%2Ffeed%2F" target="_blank">
<i class="icon-feedly-square" style="color:#222222; font-size: 85%; " >
</i></a></li>
[/html]
アイコンフォントの大きさは、Simplicityの作者わいひら（yhira）さんの指示通り85％にして表示するようにしました。また、色も黒系になるように変更しました。
これで間違いがないのか不安なところもあるのですが、思い通りにfeedlyボタンが表示できるようになったのでとりあえずは満足しています。