web制作で使えるアイコンまとめ

こんにちは、メトロです٩(ˊᗜˋ*)و

ここではweb制作で使えるアイコンを紹介しています!

 

こういうやつ↓

 

 

使い方
・webから書き出し
・ダウンロードして使う(minの方)

 

web制作で使えるアイコンまとめ

Materialdesign icons

Materialdesign icons

googleが提供してる素材です。

 

Font Awesome

Font Awesome

日本だと人気のアイコンとして、ここがよく挙げられてますね。

 

web制作用アイコンの使えるようにしてくれる記事

一応引用していますが、リンクで飛んでくれた方がわかりやすいので、引用元のサイトで見てください。

Materialdesign iconsの使い方

【Google提供】マテリアルアイコンの使い方とカスタマイズ方法まとめ

『ギガログ』さんからの引用

Material Iconsを導入してみる

Material Iconsの導入には、HTMLのヘッダー内(head要素内)に下記のコードを入れるだけでOKです!!

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

導入は以上で終わりです。

それでは導入が正常にできているか確認も含めて、アイコンを表示していきます。

Font Awesomeの使い方

Font Awesome 5の使い方とカスタマイズ方法を徹底解説!

『Web Design Trends』さんからの引用

Font AwesomeをCSSで読み込む

  • CDNを使う
  • サーバーにファイルを配置する

CDNを活用すると、HTMLにタグを貼り付けるだけなので導入がとても簡単です。

サーバーにファイルを配置する方法もそこまで難しくないので、好きな方を選んでください。

CDNを使ってFont Awesome 5を使う方法(CSS)

CDNでFont Awesome 5を読み込みたい場合は、下記のタグをheadタグ内にコピペすればOKです。

サーバーにファイルを配置してFont Awesome 5を使う方法(CSS)

サーバーにファイルを配置する場合は、下記のページでFont Awesomeのファイルをダウンロードします。

そして、普段CSSを読み込む時と同じように、headタグ内にlinkタグを記述します。

 

まとめ

HP作成にアイコンを使ってオサレ感をだしていきましょう٩(ˊᗜˋ*)و

 

コメント