【CSS】テキストリンクの横にリンクアイコンを付ける方法

2018年2月23日2019年6月12日CSS,CSSデザイン

記事中のリンク等の左にリンクアイコンを付ける方法です

サンプルではフォントアイコンに「Font Awesome」を利用しています

classが付与されていないaタグにアイコンを付ける方法

a:not([class])::before{
font-family:'FontAwesome';
content:"\f0a9";
font-size:1.2em;
color: #FF9100;
margin:4px;
}

表示結果

各社、ドメインの更新費用の比較一覧 | なるほど。

特定のclassが付与されたaタグにアイコンを付ける方法

WordPress等のブログ記事中の場合は記事部分以外に影響が出ない様にclass属性を使った方が楽かもですね

.link::before{
font-family:'FontAwesome';
content:"\f0a9";
font-size:1.2em;
color: #FF9100;
margin:4px;
}

アイコンは矢印のものやクリップアイコンが似合いますね