css リンクに自動でアイコンを付ける

今回はライトなカスタマイズをひとつ。

リンクに何かしら装飾をする際に、そのリンクがどういうリンクかを知らせるためにアイコンをつけたりしますが、それを毎回自分で入れるのはとても面倒です。
アイコンを入れるためには、javascriptやjQueryで入れたりもしますが、cssでも入れることはできます。

javascript等でアイコンを入れるにしても、そのリンクがどんなリンクかを調べるためには、リンクの中身の文字列を調べて、それに対応するアイコンを当てたり、あるいはclassを任意に付けることでそのclassからアイコンを判別できます。

サンプル

このcssでは、

というようなことをしています。
アイコンのユニコードとは、今回の場合はfontAwesomeを利用しているので(fontAwesomeの)iconを何かしら選んで、表示されたアイコン一覧の下にunicodeとあるものを選択します。

例えばfa-address-bookを開いた際、「Unicode: f2b9」と表記されていますが、上記のように擬似要素でユニコードを利用する時にはそのままf2b9とするとそのテキストが表示されてしまいます。そのため\(バックスラッシュ、もしくは半角¥)を先頭につけます。こうするとそのテキストがコードだというのをブラウザが理解します。

a[href*=””]というのは、つまりは、

のhref部分ということです。これは他にも使えまして、例えば
[class^=”test_”] このようなものがあれば、

これらにマッチします。つまりいちいち.test_1のなんちゃらと指定せずとも、.test_のつくクラスを全体的に指定できるということです。=の前の*や^はどのようにマッチさせるかを指定できます。文字列のどこかに指定した文字列がある過渡を調べる場合は*で、先頭からの場合は^のような使い方をします。
※他にもありますが割愛。

リンクのbeforeとafterにそれぞれ指定した内容のテキスト等がマッチすればそのアイコンを付けるということができるわけです。
後は普通にリンクを書くだけということです。

スポンサーリンク

シェアする

フォローする