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

Question

BuBux @BuBux

WordPress

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

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

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

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 картинку и она на сайте отображается. Но почему те картинки не отображаются не понимаю...

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

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

Ответы на вопрос 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-кодом вставлять.

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

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

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

Войти через центр авторизации

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

JavaScript

+3 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- 20 часов назад
- 71 просмотр
1

ответ
WordPress

Простой
Как сделать ссылку на полное изображение?
- 1 подписчик
- 22 часа назад
- 43 просмотра
2

ответа
WordPress

+2 ещё

Простой
Как добавить счетчик яндекс метрики в elementor без плагинов?
- 1 подписчик
- 22 часа назад
- 63 просмотра
2

ответа
WordPress

Средний
Как сделать простой парсер своих страниц WordPress с внесением данных в БД?
- 1 подписчик
- вчера
- 52 просмотра
2

ответа
JavaScript

+1 ещё

Простой
Неизвестные скрипты на сайте (plupload и moxie). Для чего?
- 1 подписчик
- вчера
- 107 просмотров
1

ответ
WordPress

+1 ещё

Простой
Как импортировать большую базу данных в Wordpress?
- 1 подписчик
- вчера
- 53 просмотра
2

ответа
WordPress

Простой
Что за файл ru_RU.l10n.php в папке /wp-content/languages/ который переписывает весь перевод?
- 1 подписчик
- вчера
- 29 просмотров
0

ответов
WordPress

Простой
Как исправить ошибку при создании записи Wordpress?
- 1 подписчик
- вчера
- 24 просмотра
2

ответа
WordPress

Средний
Wordpress pagespeed Ninja почему меню отображается под контентом?
- 1 подписчик
- вчера
- 24 просмотра
0

ответов
WordPress

Средний
Wordpress меняет якорь «?» на «#» в UTM ссылках, как починить?
- 1 подписчик
- вчера
- 24 просмотра
1

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

WordPress developer (Contractor, Remote)

Hicaliber

До 2 300 $

Разработчик на Wordpress

Nocodered

от 40 000 до 140 000 ₽

Контент-менеджер, редактор (web3, крипто, финансы)

Bitbanker.ru

от 80 000 до 100 000 ₽

Доработать вебпроект со стеком: yii2, jquery, vue

19 апр. 2024, в 13:06

6000 руб./за проект

Правки и доработки CRM системы PHP, JS, Smarty,

19 апр. 2024, в 13:03

1500 руб./в час

Доработка сайта на Yii 2.0

19 апр. 2024, в 13:00

999 руб./за проект

Возможно, конструктор удаляет ссылки на картинки. Но возможно и нет. Попробуйте нажать ПКМ на прямоугольник, где должна была быть картинка соцсети, выберите 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?

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

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

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