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

Question

BuBux @BuBux

WordPress

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

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

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

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-кодом вставлять.

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

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

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

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

WordPress

Простой
Как в классе walker задать в внутри ссылки span?
- 1 подписчик
- 16 дек.
- 33 просмотра
0

ответов
WordPress

+1 ещё

Средний
Почему не срабатывают хуки в woocommerce?
- 1 подписчик
- 15 дек.
- 44 просмотра
2

ответа
PHP

+3 ещё

Простой
Как исправить PHP Warning, если заходить на WordPress через Live Server VSCodium?
- 2 подписчика
- 15 дек.
- 133 просмотра
0

ответов
WordPress

Простой
Как отобразить содержимое json файла в wordpress?
- 1 подписчик
- 14 дек.
- 61 просмотр
2

ответа
WordPress

Средний
Не отображается Главная страница а другие страницы работают WordPress?
- 1 подписчик
- 14 дек.
- 57 просмотров
1

ответ
WordPress

+1 ещё

Простой
Как WooCommerce увеличить число вариаций товара?
- 1 подписчик
- 14 дек.
- 20 просмотров
0

ответов
WordPress

Простой
Как в meta title, meta description вывести информацию с произвольных полей в Wordpress?
- 1 подписчик
- 13 дек.
- 40 просмотров
0

ответов
WordPress

Средний
Перестало работать popup уведомление, как пофиксить?
- 1 подписчик
- 11 дек.
- 42 просмотра
0

ответов
WordPress

+1 ещё

Простой
Wordpress woocomerce использую WBW Product Filter, как получить количество?
- 1 подписчик
- 11 дек.
- 16 просмотров
0

ответов
WordPress

+1 ещё

Средний
Не приходят письма с уведомлением на почту из админки ВордПресс?
- 2 подписчика
- 10 дек.
- 274 просмотра
2

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

Fullstack на Wordpress

SilverDuck

от 100 000 ₽

Технический специалист / интегратор / разработчик (Javascript, PHP, WordPress)

HRScan

от 1 000 $

Backend разработчик

Charismo

от 220 000 до 240 000 ₽

Доработать мобильное приложение на Flutter

18 дек. 2024, в 13:22

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

Создание сайта с chatGPT

18 дек. 2024, в 12:37

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

Wordpress+Elementor правки

18 дек. 2024, в 12:22

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

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

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

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

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