こんにちは！ あますた(@amaguristar)です。

• 「サイトでリンクの場所を分かりやすくするためにアイコン表示させたい！」

そんな時ありませんか？　cssで簡単に設定できますよ。

　

導入方法

1. リンク用のアイコンを用意する。
2. cssを編集

の2工程。

1. リンク用のアイコンを用意する

まずはアイコンを用意しないと何も始まらないので準備。

当然自分で書いても良いですし。フリーのアイコンをダウンロードしても良いです。

今回は下記サイトからフリーの画像をダウンロードして使用します。

>> Icon-rainbow

上記サイトからダウンロードした素材が、

これをリンク箇所に分かりやすく表示させようと思います。

2. cssを編集

a{
    border-bottom: 1px dotted #1396c0;
    text-decoration: none;
}

a::after{
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url(画像の置いてあるurl);
  background-size: contain;
  vertical-align: middle;
}

上記cssを適用すると、

>> トップ画面へリンク

この様にリンクの最後に自動的にリンク画像を表示します。

一番簡単な設定は

自分は文字のサイズによってリンクアイコンのサイズを変える設定にしてますが、単純に表示させるだけだと下記のcssで十分です。

a{
    border-bottom: 1px dotted #1396c0;
    text-decoration: none;
}

a::after{
  content: url(https://tsuredure.info/icon/icon-link16x16.png);
  margin-right: 5px;
}

上記cssを適用すると

>> トップ画面にリンク

この様に表示されます。

ちなみに、上記アイコンのサイズは16×16です。

まとめ

リンクだと分かるようにアイコンを表示するにはcssを編集。

一番簡単なのは、

a{
    border-bottom: 1px dotted #1396c0;
    text-decoration: none;
}

a::after{
  content: url(https://tsuredure.info/icon/icon-link16x16.png);
  margin-right: 5px;
}

文字のサイズに合わせて表示させるには、

a{
    border-bottom: 1px dotted #1396c0;
    text-decoration: none;
}

a::after{
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url(画像の置いてあるurl);
  background-size: contain;
  vertical-align: middle;
}

ちなみにリンク先がファイルで、拡張子に合わせて表示させるアイコンを変えたいと言う時は下記リンクを参照。

>> HTMLで簡単に拡張子に合ったアイコンを設定する方法【css】