外部リンクにFont Awesomeのfa-external-linkを付ける【覚書】

以前はimg要素で外部リンク用の画像を挿入していた。CSSでFont Awesomeのfa-external-linkアイコンを簡単に挿入できる。

.exampleとexample.comは適宜変更の事

.example a[href^="http://"]:after,
.example a[href^="https://"]:after,
.example a[target="_blank"]:after {
content: "\f08e";
display: inline-block;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
margin: 0 .3em;
text-decoration: none;
}
.example a[href*="example.com"]:after {
content: "";
}
Posted