Добавление произвольной иконки material design

Здравствуйте.

Я взял ваш стандартный сниппет с иконками и в массив icons добавил 2 иконки 'wxi-user' и 'wxi-account-arrow-down'. Последняя иконка не отображается:

https://snippet.webix.com/vuuqpvm7

Как я понял, по-умолчанию, в webix включены не все иконки. Вы не могли бы показать как добавить произвольную иконку отсюда:

https://materialdesignicons.com/

Загрузив для нее svg-файл. Хотелось бы, чтоб данная иконка подключалась также как и те, которые входят в файлы шрифтов, поставляемые с webix. То есть так как-то так:

<span style='height:23px;padding-right:40px;padding-top:3px;' class='webix_input_icon wxi-account-arrow-left'></span>

Comments

  • edited February 6

    Добрый день,

    Чтобы добавить произвольную иконку svg, добавьте классу wxi-account-arrow-left псевдоэлемент:before и для него задайте путь к иконке как
    content:url("wxi-account-arrow-left.svg"); . Это в случае, если Вы хотите переопределить дефолтную иконку.

    Возможно подключение кастомной иконки, подробнее Вы можете почитать тут. Действительно, у нас есть определённый набор иконок, но не все включены. В зависимости от скина, мы берём нужные иконки из fa или mdi.

  • edited February 6

    Nastja, спасибо за ответ. Я читал документацию по приведенной вами ссылке, но из нее мне не все было понятно. В частности, эта фраза:

    include the desired font icon pack into HTML page;

    Хотел бы уточнить. Иконки, которые включены по-умолчанию, хранятся в виде шрифтов в разных форматах, в частности, svg. Каждая иконка - соответстует коду, который указан в content у стиля. Соответственно, для иконки, которые не включены в шрифты надо создать собственный стиль, например,

    wxi-account-arrow-left: before {
      content:url("wxi-account-arrow-left.svg")
    }
    

    А файл wxi-account-arrow-left.svg я скачаю с сайта соответствующего шрифта. Так?

  • edited February 6

    Соответственно, для иконки, которые не включены в шрифты надо создать собственный стиль,

    Стиль создавать не требуется,Вам следует подключить stylesheet как
    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.7.94/css/materialdesignicons.css?v=6.1.6" type="text/css" charset="utf-8">

    В этом примере сделано подобным образом:
    https://docs.webix.com/samples/16_skins/07_icons.html

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!