fonts
アイコンフォント
サーチ…
ウェブページにアイコンフォントを含める
CSSにアイコンフォントを含めるには、次のコードを含めることができます：
@font-face {
font-family: 'myfont';
src:url('fonts/myfont.eot?-td2xif');
src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'),
url('fonts/myfont.woff?-td2xif') format('woff'),
url('fonts/myfont.ttf?-td2xif') format('truetype'),
url('fonts/myfont.svg?-td2xif#myfont') format('svg');
// Different URLs are required for optimal browser support
// Make sure to :
// 1) replace the URLs with your font's URLs
// 2) replace `#myfont` with the name of your font
font-weight: normal; // To avoid the font inherits boldness
font-style: normal; // To avoid font inherits obliqueness or italic
}
.icon {
font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback
speak: none; // To avoid screen readers trying to read the content
font-style: normal; // To avoid font inherits obliqueness or italic
font-weight: normal; // To avoid the font inherits boldness
font-variant: normal; // To avoid the font inherits small-caps
text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase
line-height: 1; // To avoid the font inherits an undesired line-height
-webkit-font-smoothing: antialiased; // For improved readability on Webkit
-moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla
}
Webページ上のアイコンフォントの使用
HTMLでアイコンを使用するには、次の各方法があります。
<!-- Method 1 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts -->
<!-- This means that regular characters are default. Icons are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>
<!-- Method 2 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts -->
<!-- This means that regular characters are default. Icons are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>
<!-- Method 3 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie <span class="icon">★★★★☆</span>!!</p>
<!-- Method 4 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie <span class="icon">★★★★☆</span>!!</p>
<!-- Method 5 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">☆</span>
!!
</p>
<!-- Method 6 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">☆</span>
!!
</p>
<!-- Method 7-->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use the 'content' style rule with a ':before selector' in your CSS -->
<p>I rate this movie
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star-unfilled"></span>
!!
</p>
方法7を選択する場合は、追加のCSSコードが必要です。このCSSコードは次のようになります。
.icon-star:before {
content: "\2605";
}
.icon-star-unfilled:before {
content: "\2606";
}
Iconic 、 Font Awesome 、 Glyphiconsなどのアイコンフォントは、通常、方法7を使用します。これは、チートシートから特殊文字をコピーして貼り付けたり、HTMLエンティティを使用したりすることを避けるためです。
しかし、それはいくつかの欠点がある方法です。まず、 :before CSSセレクターのサポートとUNICODE文字のエスケープシーケンスの使用が必要です。 IE6-7もWebkitの特定のバージョンもこのサポートを提供しません。
もう1つの欠点は、アイコンごとに別々のHTMLタグを使用しなければならず、各タグはアイコンフォントの1文字に対応することです。方法7では、HTMLタグ内にいくつかのアイコンを表示することはできません。他の方法と異なります。
しかし、他の方法には欠点があります。方法1,3および5では、チートシートから文字をコピーペーストしたり、コード内にその文字自体を入れる手段を使用する必要があります。あなたのコードエディタはキャラクタを表示することができないかもしれません。アイコンフォントがそのキャラクタの非標準的なマッピングを使用するならば、あなたのアイコンフォントのものと異なる文字を表示するかもしれません。
方法1,3および5では、正しい文字を表示するためにブラウザが適切なエンコーディングを使用する必要があります。ユニコード文字の場合、これはASCII文字の場合ほど明白ではありません。ただし、これは、HTMLタグのheadに<meta charset="utf-8" />追加することによって保証されます。
メソッド2,4、および6では、文字をコピー・ペーストする必要はありませんが、人間がコードを読みにくくなり、ヒューマン・エラーが発生しやすくなります。また、使用したいアイコンごとにHTMLエンティティコードを調べる必要があるため、それらを暗記する必要があります。メソッド7でも同様のことが当てはまりますが、これらのクラスはHTMLエンティティコードよりもはるかに簡単に覚えることができます。
ウェブページに特定のシンボルを含める
下向きの三角形を考えてみましょう。
このシンボルをWebページに表示するにはいくつかの正しい方法があります。
方法1：小数点HTMLエンティティを使用する
HTML：
▼
方法2：16進数のHTMLエンティティを使用する
HTML：
▼
方法3：文字を直接使用する
HTML：
▼
方法4：CSSを使用する
HTML：
<span class='icon-down'></span>
CSS：
.icon-down:before {
content: "\25BC";
}
これらの3つのメソッドはそれぞれ同じ出力を持つ必要があります。他の記号については、同じ3つのオプションが存在する。文字列ベースの参照（例： ♥ ♥を表示）を使用できるようにする第4のオプションもあります。
Unicode-table.comのような参照Webサイトを使用して、どのアイコンがUNICODEでサポートされているか、どのアイコンが対応しているかを調べることができます。たとえば、 http://unicode-table.com/en/25BC/で下向きの三角形の値を検索します。
これらのメソッドは、すべてのブラウザでデフォルトで使用できるアイコンに対してのみ十分であることに注意してください。 、、❄、★、☂、☭、⎗、symbolsなどの記号の場合は、そうではありません。他のUNICODEシンボルに対してブラウザ間のサポートを提供することは可能ですが、アイコンフォントを入手するか、独自のアイコンフォントを作成する必要があります。 独自のフォントを作成する方法の詳細については、独自のフォントの作成を参照してください。
人気のあるアイコンフォント
一般的なアイコンフォントのリストを次に示します。