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

Fontawesome

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

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

 

 

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;
}

アイコン画像をbase64に変換する方法

まずアイコンを透過PNG画像で取得する。

 

 

ここでできた画像は余白が大きいので、ダウンロードしてからトリミングする。

画像の余白を除去して切り抜く。

 

トリミングした画像のサイズを圧縮する。

 

PNG画像アイコンをbase64に変換する。

 

 

以上で、大きなJSファイルも、CSSファイルも読み込むことなくアイコンを表示させることができる。

 

 

  • 6 views
    Pjax で非同期画面遷移するWordpress テーマ Pjax Blog に変えてみた。 Pjax Blog テーマでは、Barba.js が使用されている。 Pjax Blog | Uniqu ...
  • 17 views
    WordPressの投稿記事は、誤字脱字を少し修正しただけでも更新日時が変更されてしまう。 誤字の訂正だけで3年前の記事の更新日が更新されてしまうのはおかしい。 目次 1 編集画面に更新日時の変更オプ ...
  • 81 views
    これまで remodal.js を使ってハンバーガーメニューのモーダルメニューウィンドウが開いていたのを、CSSだけで動くようにした。 header.php 内の3本線のハンバーガーメニューを表 ...
  • 73 views
    CSSを遅延読み込みするためには、preload を使えばよいのだが、Firefox 、IEブラウザーでは動作しない。 それで、loadCSS   cssrelpreload.js を併用する。 ...
  • 75 views
    Jpeg 画像をWebp形式に変換するとサイズが30%も減少するなどと説明されていることがよくある。 Webp 変換後のサイズの方が大きくなったというのは見つからなかった。 そこで、Webpに変換して ...
  • 63 views
    画像のサムネイルを再作成する時には、Regenerate Thumbnails 等のプラグインを使用しがちであるが、サーバーにSSHでログインできるならば、コマンドラインで同じことができる。 その方が ...
  • 70 views
    画像をWordpressにアップロードした時に、予め登録しておいた画像のタグ、キーワードが表示されるようにしたい。 Lightroom で画像を整理する時に、キーワードを登録すると、Windows の ...
  • 63 views
    サイトの頁ソースを見ると、日本語を含むURLリンクが全てエンコードされていて読めない状態なのが気になった。 これはWordpressの仕様で、日本語で出力しようとしても、最後にはエンコードされて出力 ...

タグクラウド

WordPress カテゴリ人気記事

タグ関連記事