Fonts

Webフォントとかいろいろ。

Font Awesome 5

いろいろ変わったようで…
とか使えるようになってますね。

使い方

新規で使い始める場合、この1行を</body>の直前や<head>内に追加。

すでにVersion 4を使っていて、混在させて使う場合はさらに1行、計2行を追加。

あとは使いたいフォントをIconsから探して、使いたいところにこんな感じで貼るだけ。
classのfa-2xは大きさ指定。

TwitterとかFacebookのアイコンだと、やっぱり公式カラーにしたくなったり。BrandColorsのような資料もあるし。
CSSで各色を設定。 で、それぞれにclass指定。

あとはclassを付加すれば色も変わる1

文字幅を揃える

アイコンによって幅が違う。
Twitter
Facebook
Google+
Pintest
Pocket

揃えるにはclassにfa-fwを追加するだけ。
Twitter
Facebook
Google+
Pintest
Pocket

合わせ技

1,024
256
13

…なんか嫌ですなぁ。

Font Awesome 4.7.0

Font Awesome 5が出たため、情報が一気に古くなってしまった…
使い始めの説明だけ残しておく。

使い方

Font Awesomeから必要なファイルをダウンロードするとか、Bootstrap CDN Font Awesomeを呼び出すとかいろいろ方法があるけど、Get Startedからさくっと登録して埋め込みコードを手に入れるのが楽。

あとは使いたいフォントをThe Iconsから探して、使いたいところにこんな感じで貼るだけ。

Material Icon

Font Awesomeに無いアイコンもいろいろ。
cast fingerprint phonelink_lock g_translate

Material Icon Guideにある通り、画像としても使えたりする。
とりあえず今回はWebで使いたいので、<head>~</head>内で呼び出し。

あとは使いたいアイコンを選んで、ニョキッと出てくるIcon Fontコードをコピーし、使いたいところに貼るだけ。 Material Icon Select

IcoMoon

Font Awesome, Material Iconにもないブランドフォントがあったりする。しかも色付き。

IcoMoon Libraryから、Blandsを追加。 IcoMoon Library

欲しいアイコンを選択。 IcoMoon Brands Select

Generate Fontから、判りやすいようにラベルを変更してダウンロード。 IcoMoon label

解凍したファイル群を、階層を維持したままで移動。でもって<head>~</head>内でicomoon/style.cssを呼び出し。

使いたいところに貼るだけ。

  1. 都合上、ここでの実際のソースでは直にi class="fab fa-twitter" style="color:#1da1f2;"></i>という感じで指定してます。 

Leave a Comment

Leave a Comment