web-dev-qa-db-ja.com

ダッシュと疑似：前

ダッシュを使用し、ユーザーが投稿に関連付ける1つを選択できるようにするカスタム投稿タイプを生成しています。ユーザーという考えはドロップダウンリストからアイコンを選択でき、それは右側に表示されます。

Javascriptが:before { content: '\f188';}の値を直接変更することはできないので、私は問題に遭遇しました、それで私は:before { content: attr(data-icon);}を使う要素のdata-attr（data-icon）を使うことを計画しました。

これは機能し、必要なアイコンコードでコンテンツを置き換えますが、何らかの理由でそれをアイコンではなくテキストとして表示します。 CSSで（data attrではなく）単にテキストを使用するように切り替えるとうまくいきます。

HTML：

<select name="_mo_content_menu_ico" id="_mo_content_menu_ico">
    <option value="\f118">Education</option>
    <option value="\f130">Status</option>...
    ...<option value="\f161">Gallery</option>
</select>
<span id="content_icon" data-icon="\f118"></span>

CSS：

#content_icon:before {
content: attr(data-icon);
font: 400 20px/1 dashicons!important;
speak: none;
color: #333;
padding: 8px 0;
height: 36px;
width: 20px;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all .1s ease-in-out;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

JS：

var $j = jQuery;
$j(document).ready(function(){
    $j('#_mo_content_menu_ico').change(function(){
        var icon = $j('#_mo_content_menu_ico').val();
        $j('#content_icon').attr('data-icon',icon);
    });
});

これを回避する方法はありますか？それともなぜそれが起こっているのですか？

ありがとう、

adminiconadmin-css
1
iamdannywilson

ダッシュはWordPress管理領域の一部に過ぎません。フロントエンドでダッシュを目指しているのであれば、あなたはfunction.phpの中にアイコンフォントを入れる必要があります。

add_action( 'wp_enqueue_scripts', 'frontend_dashicons' );
function frontend_dashicons() {
    wp_enqueue_style( 'dashicons' );
}

さらに、\f161のような不可解なアイコンの値を覚えておく必要はありません。ダッシュアイコンのクラス名を追加するだけです。

対応するクラス名を持つすべてのダッシュは、ここで見つけることができます。 http://melchoyce.github.io/dashicons/

（これらのクラス名はdashicons.cssで見つけられるwp-includes/css/dashicons.cssの一部です）

以上のことから、valueをHTML内のダッシュのクラス名に更新するだけで済みます。

<select name="_mo_content_menu_ico" id="_mo_content_menu_ico">
    <option value="dashicons-welcome-learn-more">Education</option>
    <option value="dashicons-format-status">Status</option>
    <option value="dashicons-format-gallery">Gallery</option>
</select>
<span id="content_icon"></span>

そしてこのようにJSを更新します。

var $j = jQuery;
$j(document).ready(function(){
    $j('#_mo_content_menu_ico').change(function(){
        var icon = $j('#_mo_content_menu_ico').val();
        // clear and add selected dashicon class
        $j('#content_icon').removeClass().addClass(icon);
    });
});

また、CSS内でこの行を削除する必要があります。

content: attr(data-icon);
0
Sven