SVGファイルを使用してオリジナルのWebフォントを使用する方法です。
Webフォント使用の流れ
ICOOON MONOでダウンロード
「ICOOON MONO」で任意のSVGファイルをダウンロードします
icomoonにアップロード
SVGファイルを「icomoon」にアップロードします
※icomoonサイトにも素材は用意されています
作成したい素材を選択して②「Generate Font」をクリック
「Download」をクリック
アップロード
DLした「icomoon.zip」を回答して中の「icomoon」フォルダを子テーマなどのテーマファイル内にアップロード
CSSの読み込み
functions.phpに以下を記載してCSSを読み込みます
function theme_name_scripts() { wp_enqueue_style( 'svg-style', get_stylesheet_directory_uri() . '/icomoon/style.css' ); } add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
CSSの記述
「icomoon」フォルダのstyle.cssに以下のようなCSSが記載されていますのでその通りに使用します
.icon-copy:before { content: "\e92c"; } .icon-paste:before { content: "\e92d"; } .icon-stack:before { content: "\e92e"; }
例
<p class="icon-copy">ダミー</p>