アコーディオンのタイトルにFont Awesome を表示させたい

0
いいねをした人: 居ません
  • このトピックには2件の返信、2人の参加者があり、最後にreadにより1年、 1ヶ月前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #130473
    read
    参加者
    13

    【お使いの Snow Monkey のバージョン】25.0.2
    【お使いの Snow Monkey Blocks のバージョン】 20.1.2
    【お使いの Snow Monkey Editor のバージョン】9.3.0
    【お使いのブラウザ】Chrome
    【当該サイトのURL】テストサイト

    ### 実現したいこと

    いつも大変お世話になっております。
    アコーディオンのタイトルにFont Awesome を表示させたいのですが、
    以下のcssでは×になってしまいました。お忙しいところ恐れいますがご教授いただければ幸いです。

    .smb-accordion__item__title::before {
    content: “\e07b”;
    font-weight: 900;
    font-family: “Font Awesome 5 Free”;
    }

    iconは過去の質問を参考に以下のファイルの中から探しています。

    0
    いいねをした人: 居ません
    #130592
    アバター画像キタジマ タカシ
    参加者
    2371

    Snow Monkey の FontAwesome は CSS 版ではなく JS 版なので、JS か PHP で入れることになります。PHP のほうが簡単だと思うので PHP のサンプルコードを。下記のコードを My Snow Monkey プラグインか子テーマの functions.php に貼り付けてみてください。fas fa-globe の部分は好きなものに変えてください。

    add_filter(
    	'render_block_snow-monkey-blocks/accordion-item',
    	function( $block_content, $block ) {
    		$block_content = str_replace(
    			'<div class="smb-accordion__item__title">',
    			'<div class="smb-accordion__item__title"><i class="fas fa-globe"></i>',
    			$block_content
    		);
    		return $block_content;
    	},
    	10,
    	2
    );
    1
    いいねをした人:
    #130772
    read
    参加者
    13

    ご教授いただきましてありがとうございます!
    アイコンを表示させることができました。
    お忙しいところ具体的なコードをいただき本当に助かりました。

    1
    いいねをした人:
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • トピック「アコーディオンのタイトルにFont Awesome を表示させたい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。