Font Awesome を外部JS・CSSなしで表示する方法

Font Awesome 5 を使用するには通常、JSとCSSを読み込む必要がある。

footer.php の </body> タグの前に以下のように記述する。

<script defer src="https://use.fontawesome.com/releases/v5.9.0/js/all.js" data-search-pseudo-elements></script>
<script>
    FontAwesomeConfig = { searchPseudoElements: true };
</script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" integrity="sha384-i1LQnF23gykqWXg6jxC2ZbCbUMxyw5gLZY6UiUS98LYV5unm8GWmfkIS6jqJfb4E" crossorigin="anonymous">

こうすると、外部ファイルを読み込む時間がかかり、遅く感じる。

Fontawesome

フォントオウサムをJS、CSS なしで表示する

使用したいアイコンを検索する。

Font Awesome

fontawesome.com

https://fontawesome.com/icons/angle-double-down?style=solid

SVGファイルをダウンロードする。

そのソースを、表示したいところに貼り付ける。

この画面右下にある、トップへ戻る、最後にジャンプリンクを作る例：

<div id="page_top2"><a href="#">
<svg class="svg-inline--fa fa-angle-double-up fa-w-10" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-double-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M177 255.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 351.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 425.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1zm-34-192L7 199.7c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l96.4-96.4 96.4 96.4c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9l-136-136c-9.2-9.4-24.4-9.4-33.8 0z"></path></svg>
</a></div>
<div id="page_bottom"><a href="#end">
<svg class="svg-inline--fa fa-angle-double-down fa-w-10" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-double-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M143 256.3L7 120.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0L313 86.3c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.4 9.5-24.6 9.5-34 .1zm34 192l136-136c9.4-9.4 9.4-24.6 0-33.9l-22.6-22.6c-9.4-9.4-24.6-9.4-33.9 0L160 352.1l-96.4-96.4c-9.4-9.4-24.6-9.4-33.9 0L7 278.3c-9.4 9.4-9.4 24.6 0 33.9l136 136c9.4 9.5 24.6 9.5 34 .1z"></path></svg>
</a></div>
<div id="end"></div>

CSSで装飾する。

/*PAGE TOPボタン追加*/
#page_top2{
    width: 30px;
    height: 50px;
    position: fixed;
    right: 0;
    bottom: 50px;
    background: #003a75;
    opacity: 0.6;
    border-radius: 8px;
}
#page_top2 a{
position: relative;
display: block;
width: 50px;
height: 50px;
text-decoration: none;
font-size: 40px;
}
svg.svg-inline--fa.fa-angle-double-up.fa-w-10 {
    right: 22px;
    position: absolute;
    bottom: 6px;
}
#page_bottom {
    width: 30px;
    height: 50px;
    position: fixed;
    right: 0;
    bottom: 0px;
    background: #003a75;
    opacity: 0.6;
    border-radius: 8px;
}
#page_bottom a{
display: block;
width: 50px;
height: 50px;
text-decoration: none;
font-size: 40px;
}
svg.svg-inline--fa.fa-angle-double-down.fa-w-10 {
    right: 2px;
    position: absolute;
    bottom: 6px;
    width: 25px;
    height: auto;
}

疑似要素 before で表示する方法

cssで疑似要素 ::before 等を使って表示するには、SVG画像をbase64に変換してから次のように貼り付ける。

カテゴリ名の前にフォルダーアイコンを表示する例：

.post-categories a:before {
    display: inline-block;
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMBAMAAACgrpHpAAAAElBMVEVHcEz/////////////////// IGTx/AAAABXRSTlMA5CcHtCU5YekAAAAuSURBVAjXY1AMFWIAAWEGQzAdwMASGhqoAKSBgFkAQgNJQrQwVL1iaChYPxQAAHQNB8tHU2dDAAAAAElFTkSuQmCC);
    width: 14px;
    height: 12px;
    vertical-align: middle;
    margin-right: 2px;
}

新規タブで開く外部リンクの後ろにアイコン表示例：

.entry-content a[target="_blank"]:after {
    font-family: "Font Awesome 5 Free";
	content: '\f08e';
	content: '\f35d';
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMBAMAAACgrpHpAAAAJFBMVEVHcEwAZAAAZAAAZAAAZAAAZAAAZAAAZAAAZAAAZAAAZAAAZACEW0TNAAAAC3RSTlMA27 JcykQzUFTYrfWlfkAAABISURBVAjXY2BAAhy7NzKwFSkpBVjvZmAHCXjvZmAEUixbrMG09wIOEM28E8gG0tYTAsB0BIMZmGYA0UwgWoGBgU1RUFA8gAEAFvEJ3bYbpjgAAAAASUVORK5CYII=);
	font-size: 0.9em;
	margin: 0 3px 0 2px;
}

.lkc-external-wrap .lkc-url-info:after {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMBAMAAACgrpHpAAAAJFBMVEVHcEwAZAAAZAAAZAAAZAAAZAAAZAAAZAAAZAAAZAAAZAAAZACEW0TNAAAAC3RSTlMA27 JcykQzUFTYrfWlfkAAABISURBVAjXY2BAAhy7NzKwFSkpBVjvZmAHCXjvZmAEUixbrMG09wIOEM28E8gG0tYTAsB0BIMZmGYA0UwgWoGBgU1RUFA8gAEAFvEJ3bYbpjgAAAAASUVORK5CYII=);
    font-size: 0.9em;
    margin: 0 3px 0 3px;
}
.lkc-external-wrap a[target="_blank"]:after {
	display:none;
}