アイコンフォント「Fontello」にX（Twitter）アイコン追加する方法
こちらからX(Twitter)のsvgデータをダウンロード。
Webフォントを配布している「IcoMoon」でXロゴのsvgファイルをアイコンフォント化する。
名称は「logo_x」
こちらの記事を参照
「Fontello」で作成した現在使用中のアイコンフォントに組み込む
※ここではi-font3に組み込む
アイコンフォントのZipデータをダウンロードし、解凍する。
icomoon/fontsフォルダの中身を全てfontフォルダにコピー
css/i-font3.cssに以下を追加
icomoonのオリジナルcssのアイコンフォント読込先をfontsから../fontに変更
クラスをiconからiconxに変更
/* -------------------------------------------------------------
オリジナル X（Twitter）icomoonにて作成 ここからicommonの記述
fontsを../fontに変更、classを「iconx」にしてi-font3と切り分け
--------------------------------------------------------------- */
@font-face {
font-family: 'icomoon';
src: url('../font/icomoon.eot?yuwvt9');
src: url('../font/icomoon.eot?yuwvt9#iefix') format('embedded-opentype'),
url('../font/icomoon.ttf?yuwvt9') format('truetype'),
url('../font/icomoon.woff?yuwvt9') format('woff'),
url('../font/icomoon.svg?yuwvt9#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="iconx-"], [class*=" iconx-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: never;
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;
}
.iconx-logo_X:before {
content: "\e900";
}
後はiタグのクラスをiconx-logo_xにする
<i class="fa iconx-logo_X"></i>
