Pickupニュース

Genericons
Webフォント

Genericons

Automattic社の提供するアイコンWebフォント
Automattic社の提供するアイコンWebフォントです。
このページでは、GenericonsをWebサイトで使用するための導入から基本的な使い方を紹介しています。
1 Genericonsの導入

スタイルシートのリンク(ファイルをダウンロードして利用する場合)

リンク先のDownloadをクリックして、ファイルをダウンロードします。

Webサイト

HTMLマークアップ

ダウンロード・解凍後のgenericonsフォルダから、フォントとスタイルシートを含んだgenericonsフォルダをアップロードし、<head>タグ内にgenericons.cssまでのパスをリンクする記述を追加します。
HTMLCopy
<link rel="stylesheet" href="path/genericons/genericons.css">

スタイルシートのリンク(CDNを利用する場合)

GenericonsはスタイルシートファイルはCDN配信サービスcdnjsでも配信されていますので、リンクを貼るだけでアイコンWebフォントを利用することが出来ます。

HTMLマークアップ

<head>タグ内にCDNで配信されているgenericons.min.cssまでのスタイルシートパスへリンクする記述を追加します。
HTMLCopy
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/genericons/3.1/genericons.min.css">

基本的な使い方

Genericonsの記述方法

アイコンを表示したい箇所に以下のような記述を追加します。
Genericonsのアイコン
<span class=”genericon genericon-{アイコン名}”></span>

デモ

See the Pen Genericons by JaSTIN (@JaSTIN) on CodePen.24295

1 2

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください