CSS WEB制作

『IcoMoon』のWeb-FontをWebページに実装する方法

投稿日:2019年5月17日 更新日:

オリジナルのアイコンフォントを簡単につくれる『IcoMoon』。
自作のSVGアイコンづくりで活用していたけど、
Web-fontも使えるので実装の方法を確認しておく。

  1. IcoMoon』へアクセスし、画面右上の『IcoMoon App』をクリックします。

  2. 使用したいアイコンを選択します。

    左上の『Import Icons』をクリックすると、他のアイコンリストを追加できます。

          
    使用したいアイコンをクリックして、選択。
    画面右下の『Generate Font』をクリックすると、先ほど選択したアイコンデータ一式がダウンロードされます。

  3. ダウンロード後は、画面が下のように変わります。

    今回、ダウンロードしたアイコンフォントの内容が表示されています。
    ここからコードを確認することができます。

      
    カーソルを近づけると、『Get Code』という赤文字が現れますので、クリック。


    Webページへ実装するためのコードが表示されます。

  4. ダウンロードファイルは、Zip形式で圧縮されているので解凍します。
  5. 解凍するとフォルダ内に6アイテム入っています。


    その中で必要なのは、2アイテムだけ。
    ・fontフォルダ(中身ごと全部)
    ・style.css

    サイトに実装するには、上記の2アイテムをアップロードして、ページ内のヘッダーにstyle.cssのリンクを張るだけ。
    あとは、『Get Code』で表示された実装コードをHTML内のアイコンフォントを使いたい場所にコピペします。

    すでに、CSSファイルで「style.css」を使用している場合は、「icomoon」のcssで上書きしてしまわないように気をつけましょう! ファイル名が同じなので注意が必要です!

    上書きを回避するには、新しくWeb-font用のフォルダを作って、それをまるごとアップロードすると安全です。

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-CSS, WEB制作

執筆者:


comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

関連記事

CSS★装飾テクまとめ

  ちょっとした装飾をしたいときに使えるコードを探していたときの備忘録。   2016年の記事なので少し古め。 コピペで実装できる、最新ウェブテクHTML/CSSコードスニペット4 …

CSS★丸い背景+円形の中央に文字

cssのメモ。 丸形の作り方 基本的な方法は、 (1)div 要素で囲った範囲の上下左右のサイズを指定する(height, width) (2)背景色を付ける(background-color) (3 …

olタグで丸括弧付きの数字にする方法

olタグで丸括弧()付きの数字にしたかったので、CSSで設定する方法を調べてみました。いろいろと試した結果、下記の設定で上手くいったのでメモしておきます。CSSの書き方によっては、2行目のインデントが …

CSS★画像を右寄せにする

画像を右寄せにする方法 デフォルトは左寄せになっています。   右寄せにする手順 (1)画像をブロック要素として囲む。    ブロック要素= div・p・ul・li・dl など ブロック要素 …

no image

HTML特殊文字—ちょっと使いたい時に

 よく使う記号、使われる記号、いざという時の… < &lt; &#60; > &gt; &#62; 左の二つは、HTMLなどのマークアップ言語で …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。