キックスターターでお金を集めてまでは知っていたけど、リリースしていたとは知らず時が過ぎ、
たまたま見たら、v5がリリースされていて、良い機会なので4からv5(フリー版)に変更したお話。
目次
Font Awesomeってなに？
アイコンを出してくれるウェブフォント。
普通フォントって文字じゃないですか。明朝にしたりゴシックにしたり。
でも、これアイコンなんですよ。すごいっすよ。
これの何が素晴らしいかというと、いくらでも大きくできて、いくらでも小さくできる。
それでいて、画像を使うより表示が早い（軽い）んです。
v５の変更点
v5はプロ版があり、ライセンスを買うと利用できます。
フリー版ではsolidしか使えないのですが、プロ版はregularとlightというのが選べます。
使えるアイコンが増えるような気もする。
簡単に設置できた4！きっとv5も簡単でしょ！
target=”_blank”がついたリンクの後ろに別窓開くよ的なアイコンが付く様にCSSで指定してます。
fontawesomeを呼び出して使えば簡単に設定できた4。この手軽さがいい。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<style>
a[target="_blank"]::after {
font-family: "fontawesome";
content: " \f08e";
}
</style>
変更したら表示されない
つまづいたいくつかのパターン。
stylesheetを変更するだけじゃ表示されない
「linkをv5にすれば良いなんだろうなぁ」と呼び出すstylesheetを変更。
<link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet">
font-familyやUnicodeを変更しても表示されませんでした。
jsに変更しただけじゃ表示されない
公式を見てみると、jsで呼びだすのが推奨のみたい。
<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<script>FontAwesomeConfig = { searchPseudoElements: true };</script>
deferを使って非同期で読み込み。
まだ、足りないみたいです。
font-familyを変更しないと表示されない
font-familyの指定がかわりました。
v5にはsolid、regular、lightの3種類あるため、使いたいのを指定しなければならない。
プロ版だとレギュラーとライトが選べます。ソリッドは気持ちちょっと太く感じますね。
a[target="_blank"]::after {
/* font-family: "fontawesome"; */
font-family: "Font Awesome 5 Solid";
/* PRO only */
/* font-family: "Font Awesome 5 Regular"; */
/* font-family: "Font Awesome 5 Light"; */
content: "\f35d";
}
後ろを変えるだけでいいみたい。
contentの中にスペースがあると表示されない
文字とアイコンの間を空けたいと思って、contentの中に半角スペースを開けてました。
これ自体が表示されるわけじゃないので、ここでスペースを空けたり、マージンで空けても意味ないみたい。
a[target="_blank"]::after {
font-family: "Font Awesome 5 Solid";
/*content: " \f35d";*/
content: "\f35d";
}
一部アイコンのUnicodeが変更されて表示されない
設定されていないUnicodeを書くと、
！（エクスクラメーション）マークと？（クエスチョン）マークみたいなのが交互に点滅するみたい。
a[target="_blank"]::after {
font-family: "Font Awesome 5 Solid";
/*content: "\f08e";*/
content: "\f35d";
}
4とv5で、一部アイコンのUnicodeが変更になっている。
設置の時は一度見ておくと良いかと思います。
表示された！けど
この四角は一体・・・。結局表示されていないのかな？
display:noneが必須
content部分はあくまでアイテムを呼び出すためのもの。らしい。
a[target="_blank"]::after {
font-family: "Font Awesome 5 Solid";
content: "\f35d";
display: none;
}
スペースあけたい
なんか、ギュっとなっているので、スペースあけたい。
幸いにも、表示されているsvgにclassがついてるのでそれを使います。
.svg-inline--fa {
margin-left: 0.5em;
}
ちょっと離れたかな。
SVGってなに
だいぶ昔からあるのだけど、対応してるブラウザが少なかったからか、
いまいち普及しなかったけど、昨今はロゴでよくつかわれます。
Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス、SVG）は、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。
ウィキペディア（Wikipedia）より
こんな感じです。
最終的にこんな感じ
<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<script>FontAwesomeConfig = { searchPseudoElements: true };</script>
<style>
a[target="_blank"]::after {
font-family: "Font Awesome 5 Solid";
content: "\f35d";
display: none;
}
.svg-inline--fa {
margin-left: 0.5em;
}
</style>
<a href="https://google.co.jp" target="_blank">Google</a>_(┐「ε: )_
jQueryだとこんな感じ？
jQueryなら、cssでよいのかと。
アイコンがaタグの後に付くのでリンクはつきませんが。
<link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>$(function(){$('a[target="_blank"]').after(' <i class="fas fa-external-link-alt">')});</script>
<a href="https://google.co.jp" target="_blank">Google</a>
クリックしたら、visitedの色になっちゃった・・・。
