Sencha Touch: Откуда берутся иконки iconCls?

Мобильная версия портала построена на базе фреймворка Sencha Touch 2.4. При добавлении очередной кнопки в тулбар, интуитивно указал класс иконки mail:

   xtype: 'button',
   iconCls: 'mail',
   title:'Почта'

…и получил вполне ожидаемый результат:

Иконка не отобразилась на элементе тулбара

Оказалось, что sencha touch в качестве иконок использует значки шрифта Pictos. Тогда возникает вопрос: а какие значки идут в комплекте? Я проверил это на этом сайте. Убедившись, что необходимая мне иконка имеется в составе шрифта (буква «M»), я стал искать способы, как добавить его поддержку. Нашлось два решения:

Первый способ (сложный)

  1. Сперва сопоставить символ «M» с псевдонимом «mail» в файле /resources/themes/stylesheets/sencha-touch/<theme_name>/mixins/_Class.scss :
    @function icon-character-for-name($name) {
    ...
    @else if ($name == "mail") { @return "M"; }
    ...
    }

2. Подгрузить его в файле /resources/sass/<theme_name>.scss :
     @include icon('mail');

3. Обновить файл со стилями темы <theme_name>.css командой:

compass compile

  Второй способ (простой)

Вручную подкорректировать стили темы (/resources/css/<theme_name>.css) добавив блок для нашей иконки:

  …
  .x-tab .x-button-icon.mail:before,

  .x-button .x-button-icon.mail:before {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     text-align: center;
     font-family: «Pictos»;
     content: «M«
  }
 

Проверяем:

Иконка отобразилась

Напоследок, список стандартных сопоставлений иконок:
anchor=>a
box=>b
upload=>c
forbidden=>d
lightning=>e
rss=>f
team=>g
help=>h
info=>i
attachment=>j
heart=>k
list=>l
music=>m
table=>n
folder=>o
pencil=>p
chat2=>q
retweet=>r
search=>s
time=>t
switch=>u
camera=>v
chat=>w
settings2=>x
settings=>y
tags=>z
attachment2=>A
bird=>B
cloud=>C
delete_black1=>D
eye=>E
file=>F
browser=>G
home=>H
inbox=>I
network=>J
key=>K
radio=>L
mail=>M
news=>N
case=>O
photos=>P
power=>Q
action=>R
favorites=>S
plane=>T
user=>U
video=>V
compose=>W
truck=>X
chart2=>Y
chart=>Z
expand=>`
refresh=>1
check=>2
check2=>3
play=>4
pause=>5
stop=>6
forward=>7
rewind=>8
play2=>9
refresh2=>0
minus=>-
battery=>=
left=>[
right=>]
calendar=>\005C
shuffle=>;
wireless=>'
speedometer=>,
more=>.
print=>/
download=>~
warning_black=>!
locate=>@
trash=>#
cart=>$
bank=>%
flag=>^
add=>&
delete=>*
lock=>(
unlock=>)
minus2=>_
add2=>+
up=>{
down=>}
screens=>|
bell=>:
quote=>\"
volume_mute=><
volume=>>
question=>?
arrow_left=>[
arrow_right=>]
arrow_up=>{
arrow_down=>}
organize=>I
bookmarks=>I
loop2=>r
star=>S
maps=>@
reply=>R

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Чтобы убедиться, что вы являетесь человеком, а не спам-ботом, введите ответ в нижеследующее окно, основанное на инструкциях, содержащихся на графике.