Перейти к содержимому


Фотография
- - - - -

Как украсить параметры цены (и некоторые элементы)

jbprice calc jbprice plain css

В теме одно сообщение

#1 isay777

isay777

Отправлено 10 August 2015 - 22:58

*
Популярное сообщение!

Данная тема для тех, кто любит иконки  O0

 

И так будем украшать цену на одном из проектов. Имеем в дано: Сайт с подключенным bootstrap и fontawesome

Есть цена jbprice calc с выводом параметров с помощью UI buttons. 

(Все действия работают и в других вариантах, это просто пример, как можно делать.)

 

5dde8b6705.png

 

Выглядит это скучно, и не очень понятно юзеру. 

 

Вариант 1. Добавляем стрелочки. 

Идём настройку вывода цены (шаблон нашей цены для full). И вставляем иконку стрелочки в поле подсказки. 

<i class="fa fa-chevron-right"></i>

dfc7489d4f.png

 

Точно так же можно использовать иконки  Glyphicons или любые другие подключенные к вашему сайту. 

<span class="glyphicon glyphicon-chevron-right" ></span>

Получаем вот такую картину. 

 

8ccd2b0116.png

 

 

 

Вариант 2 Украшаем заголовок параметров. 

Все тоже самое проделываем с заголовком параметров цены всё в том же шаблоне. 

 

25f2c623bb.png

 

Получаем: 

 

 

46d7c8a95e.png

 

 

Что мы выяснили и поняли из этого топика. 

 

Во-первых экспериментировать можно и нужно. К примеру можно взять известный сервис icomoon и сделать собственный шрифт с иконками подключить его и сделать свои иконки. 

Во-вторых мы теперь понимаем и знаем, что некоторые текстовые поля обрабатываются как текст-html и туда без проблем можно вставлять html теги в том числе иконки. (Я как-то и img вставлял)

 

PS 

8aa9ef1668.png

 

Spoiler


Сообщение отредактировал isay777: 10 August 2015 - 23:03
правил

  • 8
ХОСТИНГ для сайтов jbzoo (все попугаи)

#2 grickov84

grickov84

Отправлено 11 August 2015 - 11:00

Полезная информация для новичков.
  • 0





Темы с аналогичным тегами jbprice calc, jbprice plain, css

Click to return to top of page in style!