• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Genesis WP Fan

Genesis Framework とWordPressカスタマイズの情報サイト

  • ホームHome
  • 日本人向けGenesis子テーマ「Muromachi」Genesis Child Theme “Muromachi”
  • Genesis とは
  • Genesis子テーマ一覧
  • Genesisの使い方
  • Genesisカスタマイズ
  • Genesisプラグイン
  • お問い合わせ
HomeGenesis Framework カスタマイズGenesisサイトでFontAwesomeを使う方法
  • Genesis Framework カスタマイズ

GenesisサイトでFontAwesomeを使う方法

genesis-font-awesome-7-thumbnail

今回はFontAwesomeという人気のアイコンフォントを Genesis サイトで使う方法を紹介します。

アイコンフォントという名前の通り、まさにフォントそのものなので、見た目はアイコンでもfont-size で拡大縮小したり、color で色を変えたり、、、文字を扱うのと同じようにアイコンを扱うことができます。

http://fontawesome.io/

genesis-font-awesome-4

目次

  • FontAwesomeの使い方
    • 1 functions.phpでFontAwesomeを読み込み
    • 2 style.cssを編集

FontAwesomeの使い方

1 functions.phpでFontAwesomeを読み込み

Genesis子テーマのfunctions.phpに以下のコードを追加します。

これで、FontAwesomeの読み込みは完了です。

add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {

    wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css' );

}

2 style.cssを編集

FontAwesomeを表示させるには、<i>タグを使う方法と、CSSの擬似要素を使う方法あるので、アイコンを表示させる場所などに合わせて選択して下さい。

iタグを使う方法

それでは黒い矢印のアイコンを表示させてみましょう。

<i>タグを使ってアイコンを表示させる場合は、記事編集画面やテキストウィジェットなどを使って、以下のように入力します。

<i class="fa fa-arrow-down" aria-hidden="true"></i>

上のコード中のfaは、FontAwesomeのアイコンを使う場合には、どのアイコンにも入るクラス名です。

下の画像にあるfa-arrow-downが、指定したアイコンを表示させるのに必要なクラス名です。別のアイコンを表示させる場合には、このfa-arrow-downというクラス名を変更して下さい。

genesis-font-awesome-3

http://fontawesome.io/cheatsheet/

genesis-font-awesome-2

CSSの擬似要素を使う場合

CSSの擬似要素を使う方法は、直接HTMLやPHPコードに<i>タグを追加しにくい場合にとても便利です。

今度はCSSを使ってフォルダーのアイコンを『カテゴリー』の文字の前に表示させてみましょう。

genesis-font-awesome-1

CSSを使ってアイコンを表示させる場合は、下の画像にあるf115というコードを使います。

genesis-font-awesome-7

以下のコードをstyle.cssに追加すれば、アイコンが表示されます。

.entry-categories:before {
    content: "\f115";
    margin-right: 3px;
    color: #888;
}

関連記事

  • 2017年12月9日

    Genesisサイトのレイアウトを指定したもの以外無効にする方法

  • site-layout-content-sidebar
    2017年9月9日

    たった1行のコードでGenesisサイトのレイアウトを変更する方法

  • 2016年5月13日

    GenesisサイトにBody Classを追加する方法

  • studiopress-logo
    2017年12月17日

    Genesisサイトで「もっと読む」リンクの文字を変更する方法

  • 2016年3月17日

    【Genesis】パンくずリストを日本語化する方法

  • Genesis Framework カスタマイズ
  • FontAwesome

日本人のためのGenesisフレームワーク専用WordPressテーマ 『Muromachi』

SEOやセキュリティのプロから信頼されるGenesisフレームワークのメリットを生かしながら、日本人向けに見やすさや使いやすさ、機能性を追求しました。 Genesisサイトの制作ノウハウやウェブサイトの運営経験が詰まったWordPressテーマです。企業サイトはもちろん、ブログやアフィリエイトサイトなど、様々な用途にお使いいただけます。

詳しく見る
← 前の記事
GenesisサイトでFontAwesomeを使う方法
Genesisサイトのページナビゲーションを日本語化する方法
次の記事 →
GenesisサイトでFontAwesomeを使う方法
Genesisサイトにウィジェットエリアを追加する方法

最初のサイドバー

Genesis WP Fan

Genesis WP Fan

たいやき伝道師

Genesisが好きすぎてGenesisフレームワークの情報サイトGenesis WP Fanを運営しています。日本人のためのGenesisフレームワーク専用WordPressテーマ『Muromachi』を開発しました。

Follow

サイト内検索

カテゴリー

タグ

FontAwesome Genesisの設定 Meta Muromachi ウィジェット カテゴリアーカイブ サムネイル ショートコード タグアーカイブ ツール パンくずリスト フッター プラグイン ヘッダー レイアウト 固定ページ 投稿 日本語化 検索関連 管理画面 記事一覧

PVランキング

  • 1genesis-featured-posts-widget-11

    Genesis Featured Postsウィジェットの使い方

  • 2genesis-child-themes

    Genesisフレームワークでブログを作るのに鉄板のGenesis子テーマ12選

  • 3genesis-seo-settings-4

    Genesis SEO Settings の設定方法

  • 4

    競合サイトに差をつけるGenesisサイト運営のためのプラグイン27選

  • 5genesis-logo

    Genesis Frameworkをインストールする方法

  • 6genesis

    【まずはここから】GenesisとGenesis子テーマをダウンロードする方法

  • 7

    GenesisフレームワークとGenesis子テーマを日本語化する方法

  • 8

    ここ最近人気のGenesis子テーマ10選を紹介してみる

  • 9

    【100種類目前!】変幻自在のGenesis子テーマとは?

  • 10metro-pro-settings-thumbnail

    Genesisサイトの設定方法【MetroPro】

最近の投稿

  • 店舗サイトにオススメなGenesisフレームワーク専用子テーマ6選【WordPress】

  • 調べたいサイトを丸裸にするサイト内検索とページ内検索の使い方【簡単絞り込み検索】

  • WWWって何?意外と知らないウェブについてやさしく解説【World Wide Web】

  • 仕事をするときに気をつけたいGenesisフレームワークのライセンスについて整理してみた

  • 日本人向けGenesisフレームワーク専用のWordPressテーマ「Muromachi」販売のお知らせ

  • 404ページも魅力的に簡単カスタマイズ!Genesis専用プラグインで404ページをカスタマイズする方法

  • Genesis専用子テーマ『Academy Pro』の特徴

  • ここ最近人気のGenesis子テーマ10選を紹介してみる

  • Genesisサイトの投稿にPost Classを追加する方法

  • Genesis専用プラグインでレイアウト機能を簡単に拡張する方法【Genesis Layout Extras】

目次

  • FontAwesomeの使い方
    • 1 functions.phpでFontAwesomeを読み込み
    • 2 style.cssを編集
ページトップへ

Copyright © 2023 Genesis WP Fan All Rights Reserved.