HTML&CSS

外部リンクに自動でアイコンをつけるCSS

  /


リンクを貼ると自動でアイコンをつけられたらとても便利ですし、見やすくなると思いませんか？
簡単に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をコピーしてください。

CSS design HTML
RELATED POST