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

関連記事

CSS 可変で文字サイズを変更する

「画面サイズに合わせて文字の大きさも変化させたい」けど、「em」や「rem」や「%」ではうまくいかない。 早速ググってみると。。。ありました! vw(ViewportWidth)とvh(Viewpor …

CSS★span要素内のテキストを上下中央に配置する

ナビ項目の文字の後ろに「▼」をつけたのですが、そのままだと、文字よりも「▼」のほうが大きく見えてしまい、文字よりも「▼」が目立ってしまった(汗) それを解消するために「span」で「▼」だけフォントサ …

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

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

Atom★余分な改行を削除するには?

コードを打つのに便利なテキストエディタ「ATOM」。 サイト制作には欠かせないです。 このテキストエディタは、本体をインストールした後、自分の好きな機能を「パッケージ」というカタチで後からどんどん追加 …

フロート解除★clearfixの使い方

フロート解除の指定方法 <CSS> .clearfix:after { content:” “; display:block; clear:both; }   <HTML> <div …

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