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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

HTML上で要素に直接スタイルシートを指定する

style=””   ・style属性で、要素に対して直接スタイルを指定することができます。 ・この属性を使用する場合は、meta要素で基準となるスタイルシート言語を指定しておく必要がありま …

WP★吹き出し風デザインをCSSだけでやる方法

ワードプレスでプラグインを使わずに、 HTMLとCSSだけで下のような感じの会話風レイアウトの作り方。   手順はこちら   [codepen_embed height=”400 …

CSS★長いURLが改行されないではみ出してしまうときの対処法

サイトの表示テストを行っていて、指摘を受けたので調べてみました。 Macではこの現象がでなかったから気付かなかった。。。 長いURLはどうして自動改行されないの? WEBページの文章は、画面の端やボッ …

CSS★装飾テクまとめ

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

no image

リストマークと字下げインデントのまとめ

画像なしで表現するリストマークのサンプルいろいろ 行頭記号やリストマークなどの装飾を、画像なしで実現する方法を紹介しています。 リストアップの条件は、 先頭に何かしら装飾をつける 2行目以降の先頭を1 …

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