Pickupニュース

Glyphs
Webフォント

Glyphs

WebHostingHubが提供するアイコンWebフォント
現在2,075個と非常に多種多様なアイコンが提供されているアイコンWebフォントです。
このページでは、GlyphsをWebサイトで使用するための導入から基本的な使い方を紹介しています。
1 Glyphsの導入

スタイルシートのリンク

Glyphsはフォント一式と、フォントファミリーの設定を記述したスタイルシートを読み込んで使用します。

ダウンロード

リンク先のDOWNLOAD ALL ICONS IN ONE FONTをクリックして、ファイルをダウンロードします。

Webサイト

HTMLマークアップ

ダウンロード・解凍後のwhhg-fontフォルダから、custom.jsexample.htmlを削除してアップロードし、<head>タグ内にwhhg.cssまでのパスをリンクする記述を追加します。
HTMLCopy
<link rel="stylesheet" href="path/whhg-font/css/whhg.css">

基本的な使い方

Glyphsの記述方法

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

デモ

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

1 2

コメントを残す

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

記事ランキング