リンクの種類に応じてcss疑似要素とWebアイコンフォントでアイコンつける方法

Iconfonts

どうも、でこいです。

cssの疑似要素とWebアイコンフォントを使ってテキストリンクにアイコンをつけてみました。

フォントをダウンロード

今回はFontelloを使ってみました。

一覧から使いたいアイコンを選択
Iconfonts 05

めっちゃ多いけど検索もできます。

「Customize Codes」タブに移動して、わり振りたいアルファベットを入力、「Download webfont」をクリックしてダウンロード
Iconfonts 01

フォントを使えるようにする

ダウンロードしたファイルを解凍すると、中に「font」フォルダがあって、そこにフォントファイルが入っています。
Iconfonts 03
これを「font」フォルダごと任意の場所に入れます

次にWebフォントを読み込むCSSを記述していきます。
css/フォント名.css を参考に
Iconfonts 02

「..」にはさっき「font」フォルダを置いたとこを指定。

@font-face {
  font-family: 'fontello';
  src: url("../font/fontello.eot");
  src: url("../font/fontello.eot?57098116#iefix") format('embedded-opentype'), url("../font/fontello.woff") format('woff'), url("../font/fontello.ttf") format('truetype'), url("../font/fontello.svg#fontello") format('svg');
}

これでフォントを使う準備ができました。

リンクにアイコンを設定する

疑似要素 :before を使ってテキストリンクにアイコンを設定します。

IE8未満では対応してないですがまぁ知りません。

外部リンク

a[href^=”http://”] で http://から始まるリンクにアイコンをつけられます。

/* 外部リンク */
a[href^="http://"]:before {
    font-family: 'fontello';
    content: 'e';
}

内部リンク

同様に、内部リンクもつけちゃいます

/* 内部リンク */
a[href^="/"]:before, a[href^=".."] :before {
    font-family: 'fontello';
    content: 'l';
}

URLを指定して

a[href=”http://”] を使ってURL指定でアイコンを設置

/* URL指定 */
a[href="http://www.dmm.com/netgame/feature/kancolle.html/decoy284-001"]:before {
    font-family: 'fontello';
    content: 'k';
}

拡張子でアイコン変更

a[href$=””] を使うと拡張子でアイコンをつけられます。
今後自分で作ったのを配布する可能性がないわけでもないでろうという事で…w

/* ダウンロードファイル */
a[href$=".zip"]:before {
    font-family: 'fontello';
    content: 'd';
}

いろいろといじる

これでアイコンフォントを使えるようになりましたが、このままだとあらゆるリンク(サイドバーとか)にもアイコンがついちゃいます。

もっと良い方法はあると思うんですが、とりあえずpタグの中だけを指定しとけばいいだろって事でこんな感じに

/* 外部リンク */
p a[href^="http://"]:before {
    font-family: 'fontello';
    content: 'd';
}

いらないとこはアイコンが出ないように

内部リンクのアイコンをつけたのはいいものの、リンクを貼るときにURLを絶対パスで指定していたため、このまま使うと外部リンクのアイコンがついてしまいます。

また、記事トップの画像には記事へのリンクが付いているため、画像の前にアイコンが付いてしまうということにもなります…

なので今までのはとりあえずアイコンがでないように

/* いらんとこ */
p a[href^="http://decoy284.net/"]:before,
p a[href="http://twitter.com/decoy284"]:before{
	font-family: 'fontello';
	content: none;
}

はじまりのあいさつである「どうも、でこいです。」もいらないので。

とりあえずこれで消えた

まとめる

あとは位置を調整したり同じのをまとめたり。

@font-face {
  font-family: 'fontello';
  src: url('http://decoy284.net/font/fontello.eot?40184649');
  src: url('http://decoy284.net/font/fontello.eot?40184649#iefix') format('embedded-opentype'),
       url('http://decoy284.net/font/fontello.woff?40184649') format('woff'),
       url('http://decoy284.net/font/fontello.ttf?40184649') format('truetype'),
       url('http://decoy284.net/font/fontello.svg?40184649#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

a:before{
    font-family: 'fontello';
    margin:0 3px;
    color: #333;
}

/* 外部リンク */
p a[href^="http://"]:before {
    content: 'e';
}

/* 内部リンク */
p a[href^="/"]:before, a[href^=".."] :before {
    content: 'l';
}

/* 艦これ */
p a[href="http://www.dmm.com/netgame/feature/kancolle.html/decoy284-001"]:before {
    content: 'k';
}


/* ダウンロードファイル */
a[href$=".zip"]:before {
    content: 'd';
}

/* いらんとこ */
p a[href^="http://decoy284.net/"]:before,
p a[href="http://twitter.com/decoy284"]:before{
	content: none;
}

きたないかもしれないけどまぁよし

こんな感じになります
Iconfonts 04

まだまだ改善の余地があります。

頑張った

できる人がみたら超簡単だしもっとスマートな方法があるのかもしれませんが、僕としてはよく頑張ったと思いますw

フォントなので色変えたりとかいろいろできて面白いですね。

これを見てやろうと思いました。
見出しのデザインを css の疑似要素と Web アイコンフォントで装飾して見出しを見出しらしく。 | ホホ冢次男

関連記事

ブログをフォロー

コメントを残す