サイトで使う方法を紹介します。色を変えたり、、、文字を扱うのと同じようにアイコンを扱うことができます。functions.phpでFontAwesomeを読み込みGenesis子テーマのfunctions.phpに以下のコードを追加します。これで、FontAwesomeの読み込みは完了です。style.cssを編集FontAwesomeを表示させるには、<i>タグを使う方法と、CSSの擬似要素を使う方法あるので、アイコンを表示させる場所などに合わせて選択して下さい。iタグを使う方法それでは黒い矢印のアイコンを表示させてみましょう。<i>タグを使ってアイコンを表示させる場合は、記事編集画面やテキストウィジェットなどを使って、以下のように入力します。aria-hidden="true"></i>上のコード中のfaは、FontAwesomeのアイコンを使う場合には、どのアイコンにも入るクラス名です。下の画像にあるfa-arrow-downが、指定したアイコンを表示させるのに必要なクラス名です。別のアイコンを表示させる場合には、このfa-arrow-downというクラス名を変更して下さい。http://fontawesome.io/cheatsheet/CSSの擬似要素を使う場合CSSの擬似要素を使う方法は、直接HTMLやPHPコードに<i>タグを追加しにくい場合にとても便利です。今度はCSSを使ってフォルダーのアイコンを『カテゴリー』の文字の前に表示させてみましょう。CSSを使ってアイコンを表示させる場合は、下の画像にあるf115というコードを使います。以下のコードをstyle.cssに追加すれば、アイコンが表示されます。『Muromachi』SEOやセキュリティのプロから信頼されるGenesisフレームワークのメリットを生かしながら、日本人向けに見やすさや使いやすさ、機能性を追求しました。Genesisサイトの制作ノウハウやウェブサイトの運営経験が詰まったWordPressテーマです。企業サイトはもちろん、ブログやアフィリエイトサイトなど、様々な用途にお使いいただけます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。