逆引きゴリラ

News
2021/01/12 設定値の解説記事を 2 件追加しました。
  1. ホーム
  2. 記事
  3. FontAwesome アイコンの軽量版使用時に他のアイコンを追加したい

FontAwesome アイコンの軽量版使用時に他のアイコンを追加したい

更新日時
公開日時
カテゴリー
未分類
タグ
Theme

動作確認済みのバージョン

Snow Monkey v12.1

サンプルコード

my-snow-monkey.php
<?php

  …略…

	add_action( 'wp_enqueue_scripts', '_enqueue_assets' );
	add_action('admin_enqueue_scripts', '_enqueue_assets' );

	function _enqueue_assets() {
		wp_enqueue_script(
			'my-snow-monkey-fa',
			MY_SNOW_MONKEY_PATH . '/assets/scripts/fontawesome.js',
			[
				\Framework\Helper::get_main_script_handle() . '-fontawesome',
			],
			filemtime( MY_SNOW_MONKEY_PATH . '/assets/scripts/fontawesome.js' ),
			true
		);
	}

My Snow Monkey のディレクトリに src/scripts/fontawesome.js を生成し、下記のように記述する。

src/scripts/fontawesome.js
import { library, dom } from "@fortawesome/fontawesome-svg-core";

// fas fa-download を追加する例
import {
	faDownload,
} from "@fortawesome/free-solid-svg-icons";

library.add(
	faDownload,
);

// far fa-file-alt を追加する例
import {
	faFileAlt as faFileAltRegular,
} from "@fortawesome/free-regular-svg-icons";

library.add(
	faNewspaperRegular,
);

// fab fa-chrome を追加する例
import {
	faChrome,
} from "@fortawesome/free-brands-svg-icons";

library.add(
	faChrome,
);

// Snow Monkey ロゴを追加する例
// <i class="fasm fa-snow-monkey" ></i> で表示できるようになります
library.add(
	{
		prefix: 'fasm',
		iconName: 'snow-monkey',
		icon: [
			20,
			20,
			[],
			'',
			'M13.982,16.711c-0.744,1.441 -2.248,2.428 -3.982,2.428c-1.735,0 -3.238,-0.986 -3.983,-2.428c0.909,-1.213 2.355,-2.002 3.983,-2.002c1.629,0 3.074,0.789 3.982,2.002Zm-0.748,-7.657c-0.314,2.56 1.248,2.919 1.248,5.603c0,0.467 -0.072,0.918 -0.205,1.344c-1.037,-1.203 -2.57,-1.967 -4.277,-1.967c-1.708,0 -3.24,0.764 -4.277,1.967c-0.133,-0.426 -0.205,-0.877 -0.205,-1.344c0,-2.684 1.563,-3.043 1.247,-5.603c-0.362,-2.928 -4.315,-2.465 -4.315,-5.334c0,-1.579 1.279,-2.858 2.858,-2.858c1.709,0 2.765,1.558 4.692,1.558c1.926,0 2.982,-1.558 4.691,-1.558c1.578,0 2.857,1.279 2.857,2.858c0.001,2.869 -3.952,2.406 -4.314,5.334Zm-4.677,-4.947l-0.708,0c0,0.498 -0.403,0.9 -0.901,0.9c-0.498,0 -0.901,-0.402 -0.901,-0.9l-0.708,0c0,0.889 0.72,1.609 1.609,1.609c0.889,0 1.609,-0.72 1.609,-1.609Zm0.979,7.141c0,-0.312 -0.253,-0.568 -0.566,-0.568c-0.313,0 -0.567,0.256 -0.567,0.568c0,0.312 0.254,0.566 0.567,0.566c0.313,0 0.566,-0.253 0.566,-0.566Zm2.062,0c0,-0.312 -0.254,-0.568 -0.568,-0.568c-0.312,0 -0.566,0.256 -0.566,0.568c0,0.312 0.254,0.566 0.566,0.566c0.314,0 0.568,-0.253 0.568,-0.566Zm3.062,-7.141l-0.707,0c0,0.498 -0.404,0.9 -0.9,0.9c-0.498,0 -0.902,-0.402 -0.902,-0.9l-0.707,0c0,0.889 0.721,1.609 1.609,1.609c0.886,0.001 1.607,-0.72 1.607,-1.609Z',
		],
	}
);

dom.watch();

My Snow Monkey のディレクトリに package.json を生成し、下記のように記述する。

package.json
{
	"devDependencies": {
		"@babel/core": "^7.11.4",
		"@babel/preset-env": "^7.11.0",
		"@fortawesome/fontawesome-free": "^5.14.0",
		"@fortawesome/fontawesome-svg-core": "^1.2.30",
		"@fortawesome/free-brands-svg-icons": "^5.14.0",
		"@fortawesome/free-regular-svg-icons": "^5.14.0",
		"@fortawesome/free-solid-svg-icons": "^5.14.0",
		"babel-loader": "^8.1.0",
		"npm-run-all": "^4.1.5",
		"rimraf": "^3.0.2",
		"webpack": "^4.44.1",
		"webpack-cli": "^3.3.12"
	},
	"scripts": {
		"cleanup:js": "rimraf assets/scripts && mkdir -p assets/scripts",
		"js:fontawesome": "webpack src/scripts/fontawesome.js -o assets/scripts/fontawesome.js --config webpack.config.js",
		"js": "npm run cleanup:js && npm-run-all -p js:*",
		"build": "npm-run-all -p js"
	}
}

My Snow Monkey のディレクトリに webpack.config.js を生成し、下記のように記述する。

webpack.config.js
module.exports = {
	mode: 'production',
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['@babel/preset-env']
					}
				}
			}
		]
	},
	resolve: {
		extensions: ['.js', '.jsx']
	}
};

注意点

記述するだけでは動作しない。
npm run build でビルドを行い、 assets/scripts/fontawesome.js を生成してくれよ!