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では「モバイルファースト」を推奨している。さらに「モバイルファースト …

jQueryでウィンドウサイズによって読み込む画像を切り替える

サイトデザインの確認のために、 全体を一枚のJPGで書き出してサクッとブラウザで確認してもらいたい時に ブラウザの幅を広げると大きな画像に、狭めると別に用意した小さな画像を表示させたい! HTMLだけ …

no image

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

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

CSS★奇数・偶数・n番目の要素を指定するセレクタ

リストの表示で、奇数の li 要素にだけ効くCSS設定をしたかったので、調べてみた。 奇数番目の要素にスタイルを適用する li:nth-child(odd){ background: #ff8080; …

CSS★最低の高さを決めて後は可変にする方法

最小の高さだけ決めて、 あとはdivなどの要素の高さに応じて高さを可変にできる指定方法。 CSSで下記のように指定します。   min-height: 80px; height: auto !impo …

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