Blog 2018.01.15

別窓で開くアイコンをFont Awesomeの4からv5へ変更した時につまずいた設定など

fontawesome
キックスターターでお金を集めてまでは知っていたけど、リリースしていたとは知らず時が過ぎ、
たまたま見たら、v5がリリースされていて、良い機会なので4からv5(フリー版)に変更したお話。

https://fontawesome.com/

Font Awesomeってなに?

アイコンを出してくれるウェブフォント。
普通フォントって文字じゃないですか。明朝にしたりゴシックにしたり。
でも、これアイコンなんですよ。すごいっすよ。

これの何が素晴らしいかというと、いくらでも大きくできて、いくらでも小さくできる。
それでいて、画像を使うより表示が早い(軽い)んです。

v5の変更点

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の色になっちゃった・・・。

【関連記事】

たかはし
この記事を書いた人:たかはし
タグ
おすすめの記事
こちらもご覧ください