Icomoon Glyphs в приложении Sencha Architect ExtJs не работает

Я использую Sencha Architect 3.0 для своего приложения extjs 5 (не трогать). Мне нужно реализовать глиф, используя шрифты icomoon. Я делаю следующие шаги.

У меня есть набор иконок и его стили, уже работающие на странице demo.html.

Я скопировал папку шрифтов и связанные стили в папку css в расположении ресурсов, также добавил css с помощью Sencha Architect.

также найдите правильное расположение шрифта в style.css. например

@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon.eot?-lgz2n8');
src:url('../fonts/icomoon.eot?#iefix-lgz2n8') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?-lgz2n8') format('truetype'),
    url('../fonts/icomoon.woff?-lgz2n8') format('woff'),
    url('../fonts/icomoon.svg?-lgz2n8#icomoon') format('svg');
font-weight: normal;
font-style: normal;}

В стиле css у меня есть следующие классы, например:

[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-2008:before {
    content: "\e600";
}

В кнопке Ext я установил свойство iconCls как «icon-2008», а глиф как e600.

Он показывает мне глиф на кнопке, но с &#e600 на фоне кнопки.

В Sencha CMD: обновление приложения sencha просто отлично.

Пожалуйста, предложите, что я делаю неправильно, или какие шаги я должен выполнить?

Спасибо


person Nitin Soni    schedule 16.09.2015    source источник


Ответы (2)


  1. Включите css, связанный с icomoon, в ваш app.json или index.html.

  2. Включите эту строку в свой app.js или application.js Ext.setGlyphFontFamily('icomoon');

  3. В вашей кнопке cfg не нужно упоминать iconCls для получения глифов. Вместо этого вы можете применить только глиф cfg.

glyph:0xe600 - (нестроковое значение)

or

glyph:'600@icomoon' - (строковое значение)

person Deepak P    schedule 16.09.2015
comment
привет, спасибо за ответ, я тоже пробовал, но не отображается, если я не применяю атрибут iconCls, единственная проблема в том, что он показывает фон с помощью &#. 0xe600 не работает. - person Nitin Soni; 16.09.2015

Наконец-то я заработал, все шаги, которые я выполнил, были правильными, единственное, что я делал неправильно, это установка кода глифа:

Раньше я устанавливал код глифа как e600@icomoon, правильное представление должно быть

glyph: xe600@icomoon

Тогда должно работать!!

person Nitin Soni    schedule 18.09.2015