無料で使えてCDNに対応しているアイコンフォントいろいろ

ウェブサイトのデザインでちょっとしたポイントやアクセントにアイコンを使うことでユーザーの方にもデザインの意図が伝わりやすくなります。今回は無料で使えてCDNに対応しているアイコンフォントをいくつかまとめてみました。外部からファイルを読み込むことで、フォントをインストールする必要なく、簡単に使用することが出来ます。

CDN対応のアイコンフォント導入のメリット・デメリットは?

CDN対応のアイコンフォントはもちろんメリット・デメリットがあります。

外部のファイルなので読み込んだ先のCDNサーバの状況に影響して表示できなくなったり、遅くなってしまう可能性もあるので、それが大きなデメリット。 ただし表示されるアイコンは画像ファイルではなくフォントファイルなのでデータ量を抑えることが出来るので、実際に表示させてみてどれくらいの表示速度になるのか確認してみると良いと思います。

メリットは断然、導入が簡単!外部のファイルを読み込むだけで、あとはCSSでお好きなアイコンを使用することが出来ます。表示されるアイコンはフォントファイルなのでCSS3で色を変えたり、サイズを変えたり、回転させたり、引き伸ばしたりと自由度も上がります。

CDNに対応しているアイコンフォントいろいろ

Font Awesome

Font Awesome

ウェブアイコンフォントと言えばFont Awesome。アイコンやソーシャルメディアのロゴなど1400種類を超えるアイコンが使えます。

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  <body>
    <!-- example icon -->
    <i class="fas fa-address-book"></i>
  </body>
</html>

Ionicons

Ionicons

Ionic Frameworkチームが作ったオープンソースのウェブフォントです。700種類以上のアイコンが公開されています。

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
  <body>
    <!-- example icon -->
    <ion-icon name="heart"></ion-icon>
  </body>
</html>

Material Icons

Material Icons

Googleが提唱するUXデザインの概念に沿って作られたアイコンフォントです。

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <body>
    <!-- example icon -->
    <i class="material-icons">accessible</i>
  </body>
</html>

Evil Icons

Evil Icons

とってもシンプルでクリーンなEvil Icons

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/assets/evil-icons.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/assets/evil-icons.min.js"></script>
  <body>
    <!-- example icon -->
    <div data-icon="ei-archive"></div>
  </body>
</html>

Devicons

Devicons

100種類以上のサービス系のウェブアイコンです。

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <link href='//cdn.jsdelivr.net/devicons/1.8.0/css/devicons.min.css' rel='stylesheet'>
  <body>
    <!-- example icon -->
    <span class="devicons devicons-bing_small"></span>
  </body>
</html>

Feather

Feather

細めのラインが特徴で250種類以上のアイコンが使い放題。可愛らしいサイトにピッタリ

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg.com/feather-icons"></script>
  <body>
    <!-- example icon -->
    <i data-feather="circle"></i>
    <script>
      feather.replace()
    </script>
  </body>
</html>

Materialize

Materialize

Materialize(マテリアライズ)CSSのフレームワークを作っているチームが制作したウェブアイコン900種類以上あります。

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <body>
    <!-- example icon -->
    <i class="material-icons">add</i>
  </body>
</html>

Social Icons

Social Icons

ソーシャルメディア系のアイコンが250種類以上あります。

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <link rel="stylesheet" href="https://d1azc1qln24ryf.cloudfront.net/114779/Socicon/style-cf.css?9ukd8d">
  <body>
    <!-- example icon -->
    <i class="socicon-amazon"></i>
  </body>
</html>

関連記事

コメントを残す

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