web-dev-qa-db-fra.com

Dashicons et Pseudo: avant

Je génère un type de publication personnalisé qui utilise les dashicons et permet aux utilisateurs de sélectionner celui à associer à la publication. L'idée étant que l'utilisateur peut sélectionner une icône dans une liste déroulante et celle-ci est affichée à droite.

J'ai rencontré un problème, javascript ne pouvant pas modifier directement la valeur :before { content: '\f188';}, j'avais donc prévu d'utiliser un data-attr (data-icon) sur l'élément puis d'utiliser :before { content: attr(data-icon);}.

Cela fonctionne et remplace le contenu par le code d'icône nécessaire mais, pour une raison quelconque, le rend sous forme de texte plutôt que sous forme d'icône. Revenir à la simple utilisation du texte (plutôt que des données attr) dans les travaux css.

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);
    });
});

Une idée de comment contourner ça? Ou même pourquoi ça se passe?

Merci,

adminiconadmin-css
1
iamdannywilson

Les dashicons ne sont qu'une partie de la zone d'administration de WordPress. Donc, si vous visez des dashicons dans le frontend, vous devrez mettre en file d'attente la police de l'icône dans votre function.php:

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

De plus, vous n’avez pas besoin de vous souvenir des valeurs d’icône cryptiques telles que \f161; ajoutez simplement le nom de classe du dashicon.

Vous pouvez trouver tous les dashicons portant le nom de classe correspondant ici: http://melchoyce.github.io/dashicons/

(Ces noms de classe font partie du dashicons.css qui se trouve via wp-includes/css/dashicons.css)

Tout cela étant dit, il vous suffira de mettre à jour la value avec le nom de classe des dashicons dans votre code 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>

Et mettez à jour le JS comme ceci:

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);
    });
});

Et vous devrez également supprimer cette ligne dans votre CSS:

content: attr(data-icon);
0
Sven