PDA

View Full Version : Chat Icon



danvega
23 Jul 2010, 5:14 AM
There is a chat icon in the resources/img folder and there is also a class to go along with it in the stylesheet. Does anyone know why this doesn't work? I could really use this so if someone has a fix please let me know.

meyerovb
23 Jul 2010, 1:23 PM
new Ext.Button({ui:'mask', iconCls:'chat'})

Is that not working for you?

danvega
23 Jul 2010, 5:19 PM
No I used chat as an iconCls for my toolbar and this is what it looks like. Does it work for you?

jboesch
21 Oct 2011, 7:20 AM
To get the chat icon (as seen in the O'Reilly demo app), you need to add this to your CSS file:


.x-tab img.chat,
.x-button img.x-icon-mask.chat {
-webkit-mask-image:url('data:image/png;base64,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')}.x-tab img.action,.x-button img.x-icon-mask.action{-webkit-mask-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAFI0lEQVRoBe2YW4hVVRjHZ0yzq6lFEaMlE0PShYRAJIl6iEqKHnqI6WJB0IvdICkfEk0aIyo0KFCph8giCitI7CkoohQL7SoZDaQmXSgKo4uWNf1+zt7DOXvOOXuvvc85bc+cD36ssy/r+77/Xmt9e+3TOzIy0jORbNJEEqvWruBOH/HuCHdHuMOeQOmmdO+ozaA5oxXPunSC2Re4MbgCNiB6vvqbKbx0giNxp9BeBU/BIJqnRecLN2UVrLDj4GIYgscRfSltYSuzYMUdA/0wCI8ieglM5XduK7vgWJhTegGshucRfQHkyj1XpziLNrfmOh2ug1dhMaJn0gbZZDpNpsexQb2y3azfKXCAwns4W5dMd7m2B2ANLCT/x/A/nKknN5mUhWFp1g4Z7vM14jrbBZvgEwi1tAdkDEf3ZrgI0S/RrkP4IdqGpuA+cJo0yw7iyNfJmzAcMrokfjp93HC4XrPYCdzkgPXDPPqvJN7eRh0VrBWqfKMuev6k3Qzr4SP4HWqOFIkZ73iYA/NhLpwPZ4LLS+FZzUp+GtwAA/heS/sGwv+irWnXc9bdTRF20/8eOBWmEKwnCectOrPhSlgF2+Bb+Bl+AxP8B/6FvLn8Td8fYQXMSubgsVZU8Cv4mAeNhC7k+jLYCopzrRURlvZA9P8WLIJJlcI5zi1Ypw+Dr4oqp3EAzlsbLCjfg1PeEUxLtlnXXU4/wQboq8gpl2BHx2l5UuyosuW8I6rQb8Bp1iwRefy4VN6FReaopU3pX7jnhwSO7MmVIiNnJ3L+DtgHCm3ltA0RH4/26rhKk1tdu4kr7yeuHkKgU3rMqI5ncfAQDIKbg14oi1nJv4OvTShthC9LjmTyGB8XwhZw+oQ8+Xbc68C8AOboK6+YYPpfDV+B06YdAkJiuMtzhvrOP1JYafMLpu/Z8CmEJNGOe60fz0J/cjZmWcP0G2+sWZ/aUnCqhFosOq7gyf6uOT888th+Ot0HmxF7MOkgt2AcXQNLkg5rHPv+dffjVvPX6PdeWtf7MJhUssD578ZtEGL6sY4MIfTjeh1zCWZ0Z+DwQXAkapkjtzviPdoPYB+JuJVMNfy7QQkR7MbGPfRaYhi7ruUSjLcbwe1k0tw2vgivwy6C70/ekPE4JK+N+HySWDuz+A5xXOnvlsqD6Lf/QjwBnxNc4a02YwzBeuIdyBosWDDT7RKcn1MRYA+/V8ImAv9Rcb5VP53ufoQ8AB8S0+PMFiwYz5fDzCjCF7SLCbojOm514zZ3HViYLIZVxmD4h8B0rtWtFXkEn4tTv22thPe2SawVeDs8TTz/NqoyhLqDGoC7wervt3lNCxKMY/fIc+BLuJXgn9G20pyuVuA1sJF4vt7GjHx8nZnT7XAXzIXnoK4FCcbLVHAqLW+DWF8v78Aq2EY8v7zGDK2+EmfBI3AtTAPNTU1dCxXs/a6ht+t6bM4FNykvw/0IdYSrDLHu8iyeQ7Cg6mLKQahgd0pbSOJwit/cl6Np6p+BrxGn6hNUp1z3m/tOWAH+DrIgwSTQcBcTFLnOzcRwSjZ6j/vdvQyCxRrSanu0mWvZqp3LjkbBuYTGnSac4CxreCQqJPFD+r/bhq+dtOSyCO7DyWzIcm9avKLXXb+FcskiYjlBfB0lP9KLJp+nv6N7ZL+cp7N9sgg+L6/zMvabcEWrK7iM07CZOXVHuJlPs4y+rNJ74JkyJpczp62N+vWOfpw0uqWzrnXXcGeN53g13REe/0w660x3hDtrPMer+Q9LNCcV91c+jgAAAABJRU5ErkJggg==')
}


Then use the iconCls: 'chat' as mentioned above.