Fonts

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

Font Awesome 5

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

使い方

新規で使い始める場合、この1行を</body>の直前や<head>内に追加。
最新はGet staredより確認。

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

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

<i class="fab fa-2x fa-twitter"></i>
<i class="fab fa-2x fa-facebook"></i> 
<i class="fab fa-2x fa-google-plus"></i> 
<i class="fab fa-2x fa-pinterest"></i> 
<i class="fab fa-2x fa-get-pocket"></i>

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

.twitter {
    background: #55acee;   
    color: #ffffff;
}
.facebook {
    background: #3b5998;
    color: #ffffff;
}
.google {
    background: #dd4b39;
    color: #ffffff;
}
.pinterest {
    background: #bd081c;
    color: #ffffff;
}
.tumblr {
    background: #36465d;
    color: #ffffff;
}
.rss {
    background: #ff8c00;
    color: #ffffff;
}
.pocket {
    background: #ef3f56;
    color: #ffffff;
}

で、それぞれにclass指定。

<i class="fab fa-2x fa-twitter twitter"></i>
<i class="fab fa-2x fa-facebook facebook"></i> 
<i class="fab fa-2x fa-google-plus google"></i> 
<i class="fab fa-2x fa-pinterest pintest"></i> 
<i class="fab fa-2x fa-get-pocket pocket"></i>

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

文字幅を揃える

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

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

合わせ技

<div class="fa-layers fa-fw fa-4x">
    <i class="far fa-thumbs-down" data-fa-transform="shrink-6"></i>
    <span class="fas fa-ban" style="color:red"></span>
</div>

<div class="fa-layers fa-fw fa-4x">
    <i class="fab fa-line" style="color:#00c300;"></i>
    <span class="fa-layers-counter" style="background:orange">1,024</span>
</div>

<div class="fa-layers fa-fw fa-4x">
    <i class="far fa-envelope" style="color:darkgray"></i>
    <span class="fa-layers-counter" style="background:orange">256</span>
</div>

<div class="fa-layers fa-fw fa-4x">
    <i class="fas fa-phone-volume" data-fa-transform="rotate-210 shrink-3 flip-v flip-h" data-fa-mask="fas fa-circle" style="color:dodgerblue;"></i>
    <span class="fa-layers-counter" style="background:orange">13</span>
</div>
1,024
256
13

…なんか嫌ですなぁ。

cssやscssで使う

引用に使えないかなーと思って苦労したが、下記の記事が参考になった。

まずはhead内に少し追加。

<script>
    FontAwesomeConfig = { searchPseudoElements: true };
</script>
<script defer src='https://use.fontawesome.com/releases/v5.0.6/js/all.js'/>

で、引用に使いたい場合は、scssやcssではこんな感じで2
TwitterやWikipediaからの引用だったら右上にアイコンを入れたりしてます。

cssバージョン。 sassだと少しすっきり書けるかな。

We’ve seen a lot of examples where adding markup like <i class="fas fa-user" /> allows you to easily add icons to any site. But what if changing the markup or HTML is not possible?

右下にも記号を入れるのに苦労した…

display: none;で消すのは、先ほど説明したようにSVGに置換されるため疑似要素があると2重でアイコンが表示されるため。SVGとセットでタグも生成されるため、一緒に消しておくことを忘れずに!

スタイルを当てるときはSVGタグ(.svg-inline–fa)に色なりマージンなり追加して下さい。
アイコン読み込みがJavaScript+SVG描画に変わった「Font Awesome 5」に変更してみた

…というのがキーポイントに。

Material Icon

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

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

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

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

<i class="material-icons">cast</i>
<i class="material-icons">fingerprint</i>
<i class="material-icons">phonelink_lock</i>
<i class="material-icons">g_translate</i>

IcoMoon

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

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

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

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

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

<link rel="stylesheet" href="/assets/icomoon/style.css">

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

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

  2. 一部は当方のテーマ依存部分を上書きしてます。 

Leave a Comment