メインコンテンツに移動
ホーム

古松

メインナビゲーション

  • ホーム
  • ビデオ
  • ご連絡

パンくず

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

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

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

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

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

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

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

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

検索フォーム

カテゴリ別

  • laravel
  • drupal
  • javascript
  • windows
  • html
  • mysql
  • php
  • apache
  • css
  • SEO
  • video
  • wordpress
  • linux
  • python
  • Electron
  • Visual Studio Code

google ads