Почему не отображаются иконки в Wordpress?

Question

BuBux @BuBux

WordPress

Почему не отображаются иконки в Wordpress?

Установил на чистый wordpress тему с демо-данными. Для редактирования страниц используется конструктор Elementor. При редактировании иконок с соц. сетями лажа. Если я не открываю редактирование секции с иконками соц сетей то всё хорошо. Но как только я нажал кнопку редактирования (ничего не меняя при этом) и сохранил, иконки не отображаются, вместо этого прямоугольник. В чём может быть причина?

Вопрос задан более трёх лет назад
2590 просмотров

9 комментариев

Подписаться 1 Простой 9 комментариев

Siverius @Siverius

Возможно, конструктор удаляет ссылки на картинки. Но возможно и нет. Попробуйте нажать ПКМ на прямоугольник, где должна была быть картинка соцсети, выберите Inspect (забыл как по-русски - последний пункт в контекстном меню) и посмотрите, есть ли ссылка на картинку.

Написано более трёх лет назад
BuBux @BuBux Автор вопроса

Siverius, вот так выглядит по итогу иконка. И второй скрин при нажатии пкм по ней.

Написано более трёх лет назад
BuBux @BuBux Автор вопроса

rustam_kuliev88, так почему-то некоторые другие иконки отображаются корректно. Допустим я делал для номера телефона иконку трубки и всё нормально.

Написано более трёх лет назад
BuBux @BuBux Автор вопроса

rustam_kuliev88, а в вордпресе плагином можно установить данные иконки? Если да, то могли бы подсказать какой лучше? Просто не так давно за данным cms сижу.

Написано более трёх лет назад
BuBux @BuBux Автор вопроса
rustam_kuliev88, видимо нашёл способ схожий с вашим. Необходимо в functions.php своей темы вставить следующий код:
function font_awesome() { if (!is_admin()) { wp_register_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'); wp_enqueue_style('font-awesome'); } } add_action('wp_enqueue_scripts', 'font_awesome');
Написано более трёх лет назад
BuBux @BuBux Автор вопроса

rustam_kuliev88, я попробовал и функцией и вставлял cnd ссылку . Ничего не помогает. В редакторе отображается, а на сайте опять пустые прямоугольники.

Написано более трёх лет назад

BuBux @BuBux Автор вопроса

rustam_kuliev88,

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <![endif]-->
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <script src="https://use.fontawesome.com/0bf9f09e94.js"></script>
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

<?php do_action('draven/action/before_render_body'); ?>

<div id="page" class="site">
    <div class="site-inner"><?php

Draven()->layout()->render_header_tpl();

Draven()->layout()->render_page_title_bar_layout_tpl();

Добавил в head ссылку на фонтавесоме. И решил попробовать как обычный html картинку. ПО итогу она так же не отображается...

Написано более трёх лет назад

BuBux @BuBux Автор вопроса

rustam_kuliev88, en.arealcoop.com

Написано более трёх лет назад
BuBux @BuBux Автор вопроса

rustam_kuliev88, я вообще запутался. Вернул всё обратно. написал через html картинку и она на сайте отображается. Но почему те картинки не отображаются не понимаю...

Написано более трёх лет назад

Помогут разобраться в теме Все курсы

Stepik

Курс по WordPress с нуля до результата. Создание сайтов без кода

2 недели

Далее
beONmax

Профессия WordPress разработчик

3 месяца

Далее
Яндекс Практикум

Фулстек-разработчик расширенный

20 месяцев

Далее

Пригласить эксперта

Ответы на вопрос 1

5 комментариев

BuBux @BuBux Автор вопроса

Почему ту класс у данной иконки "fab fa-facebook-f"

Написано более трёх лет назад
Анатолий @Tolly

А какой должен быть?
У меня иконки прописаны в стилях, примерно так:
.icon-plus:before { content: '\e812'; }

Я так понимаю, что Вы используете плагин, а плагин хранит подобные стили в БД, так что не посмотришь, что и как он там делает. Поэтому я сторонник работы без сторонних плагинов, пользуюсь только своими.

Если Вы считаете, что класс должен быть другим, то можете просто поменять класс прямо на странице и посмотреть, решит ли это проблему.

Кликаете правой кнопкой по картинке, которая не отображается и жмете посмотреть код. Кликаете по стилю и меняете класс.

Написано более трёх лет назад
BuBux @BuBux Автор вопроса

Анатолий, я так и попробовал сделать. Поменял на "fa fa-facebook", как и написано в документации от font awesome, и картинка отображается корректно. Возможно в конструкторе страниц Elementor глюк с секцией отображения социальных иконок(его использовал).

Написано более трёх лет назад
Анатолий @Tolly

Значит Вам надо: автору писать с этой проблемой или работать без этого плагина. Как я уже писал, в стилях это делается одной строкой для каждой картинки.

Написано более трёх лет назад
BuBux @BuBux Автор вопроса

Анатолий, я уже нашёл другой вариант. Если уж с соц. иконками так, то буду просто html-кодом вставлять.

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

WordPress

Средний
Проблема с выводом хлебных крошек wordpress flatsome portfolio, как исправить?
- 1 подписчик
- 29 апр.
- 74 просмотра
3

ответа
WordPress

Простой
Почему при формировании новой записи в блоге Wordpress пропадает изображение (фотография) записи?
- 1 подписчик
- 05 апр.
- 144 просмотра
1

ответ
WordPress

Средний
Как исправить ошибку при редактировании страницы WordPress?
- 1 подписчик
- 02 апр.
- 115 просмотров
1

ответ
WordPress

Средний
Как сделать метки к определенной рубрике в wordpress?
- 1 подписчик
- 26 мар.
- 75 просмотров
1

ответ
WordPress

Средний
Почему не работаю записи wordpress при рубриках написанных текстом?
- 1 подписчик
- 25 мар.
- 86 просмотров
2

ответа
WordPress

Простой
Всплывающее меню в картинке при наведении?
- 1 подписчик
- 14 мар.
- 136 просмотров
3

ответа
WordPress

Простой
Вопрос по галереям. Как сделать вывод одной картинки?
- 2 подписчика
- 12 мар.
- 145 просмотров
1

ответ
WordPress

Простой
Что это за поле при создании страницы wordpress?
- 1 подписчик
- 12 мар.
- 133 просмотра
1

ответ
WordPress

+3 ещё

Простой
Какую CMS систему выбрать для интеграции с 1С?
- 2 подписчика
- 11 мар.
- 436 просмотров
3

ответа
WordPress

+1 ещё

Простой
Как улучшить скорость загрузки сайта WordPress на виртуальном хостинге?
- 3 подписчика
- 24 февр.
- 448 просмотров
4

ответа
Показать ещё Загружается…

Возможно, конструктор удаляет ссылки на картинки. Но возможно и нет. Попробуйте нажать ПКМ на прямоугольник, где должна была быть картинка соцсети, выберите Inspect (забыл как по-русски - последний пункт в контекстном меню) и посмотрите, есть ли ссылка на картинку.
Siverius, вот так выглядит по итогу иконка. И второй скрин при нажатии пкм по ней.
rustam_kuliev88, так почему-то некоторые другие иконки отображаются корректно. Допустим я делал для номера телефона иконку трубки и всё нормально.
rustam_kuliev88, а в вордпресе плагином можно установить данные иконки? Если да, то могли бы подсказать какой лучше? Просто не так давно за данным cms сижу.
rustam_kuliev88, видимо нашёл способ схожий с вашим. Необходимо в functions.php своей темы вставить следующий код:
function font_awesome() { if (!is_admin()) { wp_register_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'); wp_enqueue_style('font-awesome'); } } add_action('wp_enqueue_scripts', 'font_awesome');
rustam_kuliev88, я попробовал и функцией и вставлял cnd ссылку . Ничего не помогает. В редакторе отображается, а на сайте опять пустые прямоугольники.
rustam_kuliev88,
<?php if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly } ?><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>">  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <script src="https://use.fontawesome.com/0bf9f09e94.js"></script> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <?php do_action('draven/action/before_render_body'); ?> <div id="page" class="site"> <div class="site-inner"><?php Draven()->layout()->render_header_tpl(); Draven()->layout()->render_page_title_bar_layout_tpl();

Добавил в head ссылку на фонтавесоме. И решил попробовать как обычный html картинку. ПО итогу она так же не отображается...
rustam_kuliev88, я вообще запутался. Вернул всё обратно. написал через html картинку и она на сайте отображается. Но почему те картинки не отображаются не понимаю...

Answer 1 · 2019-08-07 16:23:18

Скорее всего проблема в том, что не верный путь к файлу с картинками.
Посмотрите в инспекторе F11, что у Вас там прописано, какой шрифт используется,
затем Ctrl+U проверьте, а загружается ли этот шрифт?!

PS. Не пользуйтесь плагинами и не получите проблем, дыр в безопасности и другой головной боли.

Почему не отображаются иконки в Wordpress?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт