ieha * Web Design ieha * Web Design

【CSS】内部・外部リンクにアイコン表示

やりたかったこと

  • CSSのみで内部・外部リンクに自動でアイコンを表示したい
  • アイコンを高解像度ディスプレイに対応させたい

ってわけで、アイコンフォントですよね。

今回はFont Awesomeを採用しましたが、他のアイコンフォントで同じようなことができると思います。(検証していませんけれど)

CDN:Font Awesome · BootstrapCDN by MaxCDN

とりあえずコード

HTML

CSS

動作サンプル

内部リンクです。

Googleへリンク

説明

HTMLは、<head>にFontAwesomeを読み込んで、aタグは普通に設置。

CSSですが、セレクタに否定擬似クラスの「:not」、属性セレクタ「[attr^=value]」を利用して、ドメインで判定しています。判定はドメイン以外にも色々できるので、target=”_blank”の有無とかでもいいでしょうね。

そのままだと画像やなんかにもアイコンが付いちゃいます。
私はそれが嫌だったので、object、embed、.jpg、.png、.gifを:notとして、対象外としました。

プロパティでは、content: ‘<i class=”fa fa-external-link-square” aria-hidden=”true”></i>’; ってのが出来りゃ簡単なのですが、そうも行かず。

なのでまず、font-familyプロパティでFontAwesomeを指定。
contentプロパティで使いたいアイコンのUnicodeを指定して表示します。

UnicodeはFontAwesomeアイコンページ、以下の箇所から確認可能です。

Unicodeの前についている\(バックスラッシュ)は、お約束ですので付けましょう。
ちなみにこれ、環境によって¥になったりしますよね。

アイコンのUnicodeは、font-awesome.cssファイルでも確認できます。
Get Started with Font Awesome

ダウンロードしたファイル、font-awesome-4.7.0/css/font-awesome.css ですね。

コメントする

必須 が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。
※コメントは即時反映されない場合があります。

page top