Изображение в меню навигации в Wordpress

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

Есть ли какой-нибудь простой способ заменить текст в меню WordPress каким-либо значком только с помощью css? Мне нужно вставить изображение в главное меню http://www.monetaria.cz. Я попытался использовать класс в спецификации пунктов меню, а для стирания текста я использовал текстовый отступ, но это решило эту проблему.

https://picasaweb.google.com/lh/photo/idGdXrE_x3LLDWvJQ-doyKHTNTSbdw6n6xqWnRyE6B8?feat=directlink

Большое Вам спасибо,

Джон


menu wordpress image css nav
person user1815787    schedule 23.11.2012    source источник
comment
Я бы порекомендовал написать собственный обходчик меню, который добавит элемент <span class="icon"></span> в ваши пункты меню верхнего уровня. Затем вы можете добавить пользовательский класс (из «Внешний вид»> «Меню» на панели инструментов WordPress) к каждому элементу и соответствующим образом оформить span.icon. Вы можете увидеть пример кода здесь - он не совсем подходит для ваших нужд, но его несложно изменить под свои нужды.   -  person Nikola Ivanov Nikolov    schedule 23.11.2012
comment
Вы можете просто сделать text-indent:-9999, чтобы вывести текст за пределы экрана, а затем настроить таргетинг на каждый элемент и предоставить ему изображение. Вы можете сделать фоновое изображение с помощью CSS или использовать jQuery для вставки изображений. Создание ходока для этого кажется слишком сложным.   -  person Ohgodwhy    schedule 23.11.2012
comment
Ohgodwhy: Большое спасибо за ваш ответ, я использовал текстовый отступ: -9999, но это то, что я показал на картинке, что это сделало и почему я не могу использовать этот способ решения проблемы.   -  person user1815787    schedule 23.11.2012
comment
@NikolaIvanovNikolov Большое спасибо за ваш ответ, я посмотрел на это, но я использовал этот способ, когда я определял класс во внешнем виде › меню, а затем я определял фон в css, но он все еще не работает, я покажу вам свой css: .ico {текстовый отступ: -9999px; фоновое изображение: url(images/envelope_icon.png) !важно; background-repeat: no-repeat !important; ширина: 50 пикселей; }   -  person user1815787    schedule 23.11.2012

Ответы (1)


arrow_upward
0
arrow_downward

вы можете добавить HTML прямо в пункт меню, и WP отобразит его правильно, поэтому, если вы добавите что-то вроде этого

<img src="source.jpg" />

в поле Label пользовательской ссылки и введите любую ссылку, по которой вы хотите, чтобы пункт меню перешел в поле URL, тогда WP отобразит тег <img> как изображение, а также завернет его в ссылку на указанный вами URL-адрес.

person celeriko    schedule 19.05.2014