[ANSWERED] using icons

[beckhamrryyaann]

I too would like to know where i can find the names of the icons that i can use on my buttons, etc. I know it used to be on the famfamfam site but this doesn't seem to work. I see in the example docs for an add button you are using vviconplus...where can i find these names? thanks!

[richard.milone]

I moved this new question to its own thread.

[richard.milone]

The icons you are looking for are packaged as an "icon font" and are usable with css. The icon package is the "Ultimate" icon pack from icomoon.io. You can see a good preview page at http://icomoon.io/preview-ultimate.html. You can also see a list of all the icons if you go into Portal Admin-->Apps, choose any app and click the existing icon.

If you are coding your app manually you need to include <link rel="stylesheet" href="/resources/iconfonts.css"> in your index.html to bring in the icon css. If you are using Sencha Architect the icons are already included in template project resources (you can see the css defined in the Project Inspector under Resources-->Valence Theme-->ValenceIconFonts).

The individual css names for each icon can be found in /valence-4.0/resources/iconfonts.css or in Sencha Architect you can open up the ValenceIconFonts in the Resources area as described above.

[Johnny Major]

You can find all the available icons in Portal Admin under the apps section. Just select any app and click on its current icon. This will display the available icons. If you hover over the icons a tooltip with the description will display. Currently you will have to take the description and append it to "vvicon-". When it has numbers or another word it will be separated by another dash "-".

Example

Icons.jpg

podcast3 - class vvicon-podcast-3
home - class vvicon-home

You could always inspect the icons via developer tools to get the class name.

Screen Shot 2014-04-15 at 8.40.46 AM.jpg

The icon fonts that we are using are IcoMoon http://icomoon.io/#preview-ultimate. If they update the font package you might see icons on the site that Valence might not have bundled in.

I will be talking to the team about a more elegant way on finding the class name on the available icons.

Thanks