it-swarm.com.ru

Как добавить Font Awesome Icons в меню WordPress?

Как добавить Font Awesome Icons в меню WordPress

3
Chirag Pipariya

Я предполагаю, что вы хотите добавить пользовательские значки на панель инструментов? Хорошо с последним обновлением в WordPress до 3.8, значки на панели инструментов изменились. Теперь они на самом деле шрифт. Это на самом деле довольно круто, так как шрифты могут легко менять цвета с помощью CSS, а также реагируют по размеру.

Сначала я расскажу вам, как добавить пользовательский значок, используя готовые дашиконы, созданные командой MP6 (разработчики последней панели инструментов). Зайдите на http://melchoyce.github.io/dashicons/ , чтобы просмотреть все доступные в настоящее время дашиконы. Если вы хотите внести изменения в текущий пункт меню, это функция, чтобы сделать это. Добавьте это в файл functions.php вашей темы или в свой собственный плагин. Это изменит значок по умолчанию для меню "Сообщения":

function custom_post_css() {
   echo "<style type='text/css' media='screen'>
       #adminmenu .menu-icon-post div.wp-menu-image:before {
            content: '\\f337'; // this is where you enter the dashicon font code
        }
     </style>";
}
add_action('admin_head', 'custom_post_css');

Если вы хотите добавить иконку для пользовательского типа записи, она будет немного похожа на небольшую изюминку:

function cptname_custom_css() {
   echo "<style type='text/css' media='screen'>
       #adminmenu .menu-icon-cptname div.wp-menu-image:before {
            content: '\\f337'; // this is where you enter the dashicon font code
        }
     </style>";
}
add_action('admin_head', 'cptname_custom_css');

Вставьте свое имя типа поста вместо "cptname". Теперь поворот. Мы должны добавить класс к нашему пользовательскому типу записи css. Для этого мы просто добавляем строку кода в наш пользовательский хук регистрации типов записей:

'menu_icon' => '',

Так что весь наш хук регистрации выглядит так:

$args = array(
 'labels' => $labels,
 'menu_icon' => '',
 'public' => true,
 'publicly_queryable' => true,
 'show_ui' => true, 
 'show_in_menu' => true, 
 'query_var' => true,
 'rewrite' => true,
 'capability_type' => 'post',
 'has_archive' => true, 
 'hierarchical' => false,
 'menu_position' => null,
 'supports' => array('title', 'editor', 'thumbnail')
); 
 register_post_type('cptname',$args);
}

Теперь, если вы хотите использовать шрифт потрясающие иконки, нам просто нужно загрузить их в нашу тему. Загрузите шрифт и поместите CSS и файлы шрифтов в соответствующую папку вашей текущей темы. Затем нам нужно добавить еще немного кода в наш файл functions.php themes или ваш собственный плагин:

function my_custom_fonts() {
<style>
 @font-face {
     font-family: FontAwesome;
     src: url(/path-to-font-folder/fontawesome-webfont.woff);
 }
</style>
}

add_action('admin-init', 'my_custom_fonts');

И теперь мы используем код выше, чтобы выборочно выбрать наши новые значки. Это еще раз изменит значок меню "Сообщения" с помощью набора иконок FontAwesome:

function custom_post_css() {
   echo "<style type='text/css' media='screen'>
       #adminmenu .menu-icon-post div.wp-menu-image:before {
            font-family:  FontAwesome !important;
            content: '\\fa-Apple'; // this is where you enter the dashicon font code
        }
     </style>";
}
add_action('admin_head', 'custom_post_css');

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

Только что отредактировал: я попробовал кое-что здесь и фактически использовал потрясающие шрифты иконки на моем собственном сайте:

добавьте это в ваш functions.php или плагин:

function font_admin_init() {
   wp_enqueue_style('font-awesome', 'http://netdna.bootstrapcdn.com/fontawesome/3.1.1/css/font-awesome.css'); 
}

add_action('admin_init', 'font_admin_init');

затем добавьте это, чтобы выбрать актуальный значок:

function custom_post_css() {
   echo "<style type='text/css' media='screen'>
       #adminmenu .menu-icon-post div.wp-menu-image:before {
            font-family:  FontAwesome !important;
            content: '\\f0f2'; // this is where you enter the fontaweseom font code
        }
     </style>";
}
add_action('admin_head', 'custom_post_css');

Вы можете найти коды, перечисленные в файле CSS.

5
RiotAct

Для Front End я использую это:

// Add font awesome CSS http://fortawesome.github.io/Font-Awesome/examples/
function awesome_css() {
    wp_enqueue_style("fontawesome", 'http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css');
}
add_action( 'wp_enqueue_scripts', 'awesome_css' );

Чтобы добавить в Admin, посмотрите здесь: https://github.com/raket/fontawesome-for-wordpress/blob/master/fontawesome.php , кажется, есть решение, которое будет работать

2
TomC

Пример пошагового использования FontAwesome:

Включая цвет и пользовательские типы записей ????

1 Выберите значок

2 Получить SVG

Принесите SVG в Wordpress

  • Внутри functions.php, где вы регистрируете свой собственный тип записи, добавьте следующий фрагмент:

    add_action('init', 'my_init');
    function my_init() {
        register_post_type('labs', [
            'label' => 'Labs',
            // .. ect
            'menu_icon' => 'data:image/svg+xml;base64,' . base64_encode('<svg width="20" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M1591 1448q56 89 21.5 152.5t-140.5 63.5h-1152q-106 0-140.5-63.5t21.5-152.5l503-793v-399h-64q-26 0-45-19t-19-45 19-45 45-19h512q26 0 45 19t19 45-19 45-45 19h-64v399zm-779-725l-272 429h712l-272-429-20-31v-436h-128v436z"/></svg>')
         ]);
    }
    

Важные замечания:

  • Содержимое base64_encode - это скопированная необработанная строка со страницы gontub Font Awesomes.
  • Вам нужно изменить две маленькие вещи в строке svg:
    • 1: Добавить атрибут fill="black" к элементам path/s - это позволяет менять цвет в Wordpress.
    • 2: (необязательно) Измените ширину и высоту на 20, так как это размер админ ширины/высоты, и, кажется, результат будет более четким.

 enter image description here 

0
Chris