FontAwesomeでアイコンをつけると、テキストの選択ができなくなる

  • このトピックには2件の返信、2人の参加者があり、最後にNmrにより1ヶ月、 3週前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #56654
    Nmr
    参加者
    4

    トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。

    【お使いの Snow Monkey のバージョン】 最新:11.1.1
    【お使いのブラウザ】Chrome(Mac)
    【当該サイトのURL】(公開できる場合は書いていただいたほうがスムーズです)

    ===

    お世話になります。
    FontAwesomeでアイコンをつけると、テキストの選択ができなくなります。

    【再現の手順】

    1)
    段落ブロックを追加し、文字を入力する。

    2)
    「HTMLとして編集」を選択して、FontAwesomeのソースコードを追加する。
    例:<p><i class=”fas fa-check”></i>テキストテキスト</p>

    3)
    ビジュアル編集に戻す。

    4)
    この状態で、FontAwesome入りのテキストをマウスで選択しようとすると、
    テキストがうまく選択できず、あとから文字を編集したり、文字色の変更ができません。

    FontAwesomeのソースコードの追加は、この方法じゃない方が良いでしょうか?

    ご確認いただけますと幸いです。
    よろしくお願いいたします。

    0
    #56655
    キタジマ タカシ
    キーマスター
    340

    ブロックエディター(Gutenberg)には「ブロックエディターに登録されていないブロック(HTML)は編集できない」という仕様があります。FontAwesome 用のブロックがない場合は提示されたような挙動になります。

    ちょっとどのような対応がベストなのか迷いますが、一番単純なのはショートコードをつくってしまうことかなと思います。

    My Snow Monkey プラグインに下記のコードをコピペしてください。

    add_shortcode(
    	'fontawesome',
    	function( $atts ) {
    		$atts = shortcode_atts(
    			[
    				'icon' => false,
    			],
    			$atts
    		);
    
    		if ( empty( $atts['icon'] ) ) {
    			return false;
    		}
    
    		return sprintf(
    			'<i class="%1$s"></i>',
    			esc_html( $atts['icon'] )
    		);
    	}
    );

    そして、エディター上で [fontawesome icon="fab fa-twitter"] のように入力すると実際のページにアイコンが表示されます。

    1
    #56662
    Nmr
    参加者
    4

    キタジマさま

    早速の解決方法のご提示、ありがとうございました!
    こちらの方法で試したところ、問題なくテキストの選択ができるようになりました。

    解決しましたので、トピック閉じさせていただきます。
    ありがとうございました。

    1
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • トピック「FontAwesomeでアイコンをつけると、テキストの選択ができなくなる」には新しい返信をつけることはできません。