リンクを貼ると自動でアイコンをつけられたらとても便利ですし、見やすくなると思いませんか?
簡単にCSSでアイコンをつけてみましょう!!
Webアイコンフォントを使用してリンクにアイコンをつける
Webアイコンフォントを準備する。
まずFont Awesomeのサイトへ行きます。
現在 https://fontawesome.com/
旧サイトはこちら https://fontawesome.com/v4.7.0/
※クラス名が変わっています。
<i class="far fa-arrow-alt-circle-right"></i> NEW
<i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> OLD```
farだのfasだの・・・。
ともかく
下記をコピーし、内に貼り付けます。古いバージョンのコードを書いてるから大丈夫というわけではありません。最新版のFont AwesomeのCDNを利用しましょう。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

リンクのhtmlタグを書く
例えば
<a href="https://www.google.co.jp/" target="_blank">Google</a>
こんな感じで
CSSの書き方
.entry-content a[target="_blank"]:after {
font-family: 'Font Awesome 5 Free';
content: '\f0a9';
font-size: 0.9em;
margin: 0 3px 0 2px;
}
.entry-contentの要素内にある aタグのtarget属性が_blankのとき、その後ろに
WEBフォントアイコンを表示します。
リンクの前にアイコンを表示する場合は
.entry-content a[target=”_blank”]:beforeというように、疑似要素は:beforeになります。
font-familyは、 ‘Font Awesome 5 Free‘または’Font Awesome 5 Brands‘
を指定し、contentの部分には、https://fontawesome.com/ のアイコンページにあるUnicodeをコピーしてください。