HTML
CSS
icomoon

icomoonで好きなアイコンを追加する手順

More than 1 year has passed since last update.


アイコンのSVG素材をダウンロード


  • Freeのアイコン素材サイトを使う



  • 白黒のFlat風アイコンならここ




  • カラーアイコンならここ



  • SVGの色は黒を選択する



icomoonにインポート


  • IcoMoon App - Icon Font, SVG, PDF & PNG Generator

    https://icomoon.io/app/#/select


  • 上記でダウンロードしたsvgをアップロードする


  • 既存のicomoonのアイコンに追加する場合は、icomoon.svgをインポートしてから追加したいアイコンを新たに選択する


  • generate fontsでフォントデータとstyle.cssをダウンロード


  • フォントデータとstyle.cssを読み込むことでアイコンとして使うことが出来る様になる


  • 色やサイズはCSSで調整する


簡単にフォントを追加できるので今後はよく使っていきたい。