-1

Might be a naive' one - but I am sort of stuck on how to put a icon in topcoat icon button. I am creating a dynamic list with delete and modify buttons (which I want to be icons). Any help is appreciated ...

<button class="topcoat-icon-button">
    <span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
</button>
isherwood
  • 58,414
  • 16
  • 114
  • 157
rahul
  • 3,018
  • 4
  • 29
  • 28
  • – rahul Jan 13 '14 at 00:32
  • Code goes in the question. Do you have the required CSS and font files in place? http://topcoat.io/icon-button/#icon-button – isherwood Jan 13 '14 at 01:27
  • I have required font file and css in place. My question is - how do I change that square box to any meaningful icon ? I have NOT explored related css yet expecting that I shall have some switch to point to icon. – rahul Jan 13 '14 at 05:43
  • I haven't seen any indication that you can make buttons out of icons. Have you? You can place icons on buttons, however. http://topcoat.io/posts/semantic-icon-font-using-topcoat-icons/ – isherwood Jan 13 '14 at 14:02
  • Ah ha ... okay ... Coming from bootstrap I was expecting that. Then what's exactly the use of "icon buttonS" ? – rahul Jan 13 '14 at 14:35

1 Answers1

3

It is not a naive one, I also came from Bootstrap, was scratching my head, and could not find any useful documentation. First of all, you need to know that the icons are in a different repository: https://github.com/topcoat/icons

The easiest way to go is to use the font. So you need the font directory from that repository. The icomatic.html file and the js folder is the icons showcase, you should not deploy them. The icomatic.js seems to be a fallback mechanism to Unicode symbols, but as far as I understand it works with DOM replacements and thus probably needs some tweaking to work together with AngularJS. You can probably delete it as well, if you do not need the fallback.

Then you need to do the necessary HTML "includes", assuming the icomatic files are available at lib/icomatic:

<link rel="stylesheet" href="lib/icomatic/icomatic.css"/>

Then you can apply all this to your example by using the icomatic class and a glyph, e.g. "alert":

<button class="topcoat-icon-button">
    <span class="topcoat-icon icomatic" style="background-color:#A5A7A7;">alert</span>
</button>

It will still require some styling, but at least you should see an icon.

Hagen
  • 391
  • 2
  • 4