技術, その他

tablerのSVGをIcoMoonで利用する

tablerのアイコンがIcoMoonで表示されない件

4,000以上のアイコンをフリーで使えるtablerでダウンロードしたSVGをWebフォントとして使えるようにしてくれるIcoMoonで利用しようと思ったら表示できないって現象にぶち当たってしまって。

何が起こってるのかと思ったけど、調べてみりゃ単純な話しで。

【 結論 】中級者以上の人へ

  • tablerでダウンロードできるアイコンで線描のものはストロークで描かれてるからっていうのが理由。
  • だからストロークをパスに変換すりゃ表示できるようになる。

【 手順 】初心者の人へ

  • フリーのアイコンをフリーのツールで使えるようにする。
  • まずはフリーでSVGの作成、編集ができる『Inkscape』を入手。
  • インストールしたらtablerでダウンロードしたSVGを読み込む。
  • Ctrl + A で全選択。
  • メニューから
    • オブジェクト
    • 変形
    • 拡大縮小
    • 単位はpxを選択
    • 幅、高さとも640に
  • 再びメニューから
    • ファイル
    • ドキュメントのプロパティ
    • 表示
    • 単位はpxを選択
    • 幅、高さとも640に
  • 以上の作業をやっておかないとパスに変換したらスゲー太くなってしまう。
  • で、全選択を維持したまま再びメニューから
    • パス
    • ストロークをパスに変換
  • これでIcoMoonで利用できるようになったので保存。
  • 面倒だけど、アイコンを使う数だけ上述作業を繰り返す。

 

以上で問題解決。

ブログランキング・にほんブログ村へ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です