kdcsライブラリー

アイコンフォント「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>