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

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

今からレスポンシブサイトを作る時のメディアクエリとブレイクポイント【2017年度版】

新しくサイトを作ることになった。 もちろん、レスポンシブ対応で。 そこで改めて、ブレイクポイントを考えてみことにした。 Googleでは「モバイルファースト」を推奨している。さらに「モバイルファースト …

二重の打ち消し線にする方法

あるサイトの更新で、日付を打ち消し線で消して、次の行に新しく正しい日付を掲載するよう修正してほしいとの要望がありました。 打ち消し線は、cssでスタイルをもたせてやればスグにできます。   …

no image

リストマーカや番号の左側の隙間について

<ol>や<ul>といった箇条書きを指定した場合、リストマーカや番号の左側に大きな隙間ができてしまう。 ここは、CSSで何も指定していなくても、ブラウザが気を利かせてある程度の …

CSS★装飾テクまとめ

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

no image

コメントアウトの書き方★html & css & php

WEB制作ではhtml & css & phpを触ることが多いですが、コメントアウトの書き方がぞれぞれ違うので忘れないようにメモ。 ちなみに、コメントアウトとは、ソースコード側に書いて …

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