Fontelloサイトのインポート機能で以前作成したアイコングループに個別のアイコン追加方法

問題点：以前Fontelloで作成したアイコングループに新規アイコン追加は難しい

サイト：Fontelloで沢山のアイコンから必要のみのアイコンを選択して、使用することができるので、非常に便利なオンラインツールです
- Fontelloの使用方法：「自作した画像イメージをSVGに変換してFontelloカスタムアイコン作成方法」をご参考ください
但し、一度作成したアイコングループに新規アイコンを追加するときに、再度Fontelloで以前選択したアイコンをもう一度選択したり、新しいアイコンを追加したりすることが必要です
- 沢山のアイコンから以前と同じようなアイコンを探すのは大変です
- 間違いやすいし、選択漏れがよくあります
- カスタマイズしたアイコンの名前、コードを再度作成、選択する必要があり、以前のものと違う名前、コードを付けてしまうミスがよくあります
新規アイコンを作成したアイコングループに手動で追加しようと試みましたが、アイコングループの構造が分からなくて失敗しました

解決：Fontelloサイトでアイコンインポート機能で以前のアイコングループを丸ごとインポートします

良く調べてみたら、Fontelloサイトが作成済みのアイコンのインポート機能があります
サイトの上に設定のようなアイコンがあります、そこをクリックするとインポート(Import)メニューがあります
インポート可能なフォーマットは2種類あります
- 以前Fontelloからダウンロードしたアイコングループを解凍したら、config.jsonファイルがあります、それを選択すればよいです
- 以前Fontelloからダウンロードしたアイコングループのzipファイルを選択すればよい
アイコンをインポートすれば、以前選択したアイコンがすべて再選択された状態になります
- 新規アイコンを追加して、再度ダウンロードすればよいです

シリーズ記事一覧

自作した画像イメージをSVGに変換してFontelloカスタムアイコン作成方法

Fontelloで自作したイメージ画像をアイコンにすることができます

特定な画像をアイコンに変換する必要があります
例：「漢」字の画像をアイコンに変換したいです

イメージ画像（例：pngフォーマット）をSVGフォーマットに変換

いろいろなツール（例：Adobe illustrator）で画像をSVGフォーマットへの変換ができます
ここで、ツールをインストールせず、Onlineツール（例：http://pngtosvg.com/）で変換することにしました

変換されたSVGファイルをFontelloページのカスタムアイコンエリアにアップロード

FontelloウェブサイトにSVGフォーマットの画像をアップロードします
FontelloサイトのSVGフォーマットに合わないときがありますが、Fontelloに紹介されたSVG変換サイト（ https://jakearchibald.github.io/svgomg/ ）で再度SVG変換をすればよいです
アップしたイメージがFontelloのカスタムアイコンで表示され、名前などを変更することができます

Fontelloからアイコンセットをダウンロード

カスタムアイコンを含め、選択したアイコンをダウンロードします
ダウンロードしたアイコンセットを展開してdemo.htmlファイルを開いて自作したアイコンの確認ができます

複数のアイコンセットを作成する場合に各アイコンのUnicodeを重複しないよう

Fontelloで一度作成さいたアイコンセットに各アイコンのUnicodeが新しく採番されるようです
複数のアイコンセットして、同時に使用する場合、アイコンのUnicodeが重複する可能性があります。
- Unicodeの重複されたアイコンが表示されないことになります
アイコンのUnicodeを新しい採番する必要があります