オリジナルのWebフォントを使用する

SVGファイルを使用してオリジナルのWebフォントを使用する方法です。

Webフォント使用の流れ

ICOOON MONOでダウンロード

http://icooon-mono.com/

「ICOOON MONO」で任意のSVGファイルをダウンロードします

icomoonにアップロード

http://icooon-mono.com/

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>