Intereting Posts
Автоматическое истечение / удаление пользовательских типов сообщений после указанного времени статический переменный цикл не работает в WordPress Переписывание URL с пользовательским мета-мета "/% shop_name% / gallery /% gallery%" Как писать «безопасные» плагины? WordPress 404 не найден после перезаписи ссылки автора Geo Blocking в WordPress – как это можно реализовать? Я хочу импортировать свой Json-файл в настраиваемый дисплей-модальный. Как связать мой Json-файл? массовое обновление мета значения с помощью ajax Каталог для хранения защищенного файла Как переопределить функцию родительской темы через дочернюю тему Как я могу создать шаблон AMP без плагина? Чудовищная таксономия в wordpress Существует ли веб-служба XML, которая может получать сообщения, категории и другие данные с сайта? Правильный способ включить / потребовать файлы PHP в WordPress Как перечислять события по годам и месяцам с помощью расширенных пользовательских полей?

Дашикон и Псевдо: до

Я создаю персонализированный тип сообщения, который использует дашиконы и позволяет пользователям выбирать один для связи с почтой. Идея, заключающаяся в том, что пользователь может выбрать значок из выпадающего списка, он отображается справа.

Я столкнулся с проблемой, хотя, поскольку javascript не может изменить значение :before { content: '\f188';} напрямую, поэтому я планировал использовать data-attr (значок данных) для элемента, а затем :before { content: attr(data-icon);} .

Это работает и заменяет содержимое необходимым кодом значка, но по какой-то причине отображает его как текст, а не значок. Переход к простому использованию текста (а не данных attr) в 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); }); }); 

Любая идея, как обойти это? Или даже почему это происходит?

Благодаря,

Solutions Collecting From Web of "Дашикон и Псевдо: до"

Дашиконы являются лишь частью области администрирования WordPress. Поэтому, если вы нацелитесь на дашикон в интерфейсе, вам придется помещать значок шрифта внутри вашей function.php Php:

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

Кроме того, вам не нужно будет запоминать эти критические \f161 такие как \f161 ; просто добавьте имя класса dashicon.

Вы можете найти все dashicons с соответствующим классом здесь: http://melchoyce.github.io/dashicons/

(Эти dashicons.css являются частью dashicons.css который находится через wp-includes/css/dashicons.css )

Все это сказало, вам нужно будет обновить value до имени класса dashicons в вашем 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);