WING(AFFINGER5及びSTINGER PRO2)のマニュアルはコチラです※パスワードは商品フォルダ内テキストを確認

備忘録

オリジナルの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>

 

NEW大幅に進化した新バージョンWING(AFFINGER5 / STINGER PRO2)好評発売中!

ユーザー様の声

ユーザーの声をさらに見る

新バージョン「WING」を見る

ご利用バージョンやテーマにより設定方法やキャプチャ画像が異なる場合がございます

注意

この「備忘録」カテゴリはマニュアル外となっております。御了承の上でご活用頂ければ幸いです。

※テーマアップデートにより情報が一部異なる場合がございます

-備忘録

Copyright© STINGER's MANUAL , 2020 All Rights Reserved Powered by AFFINGER5.