Icons & buttons - change size, color & text position

Hi, I have a home screen with 9 icons in a 3x3 grid (with images linked) which I currently have created using images and text underneath. I also have tabs using the Ionic icons. I want to replace my images with the icons - http://ionicframework.com/docs/components/#icon-buttons shows some examples but not how to place the text under the icon.

I’ve tried playing with this without success.

<a class="button icon-right icon ion-ios7-paper-outline button-clear button-dark">News</a>

Is it possible to do this and have my icons relatively much bigger than the text below them, or do I need separate elements for icon and text as described here ?

This is what I’m trying to do:

Also, I have seen this post on how to change icon size, but do not understand “.my-button” - is the “my-” prefix a reserved space within the Ionic framework?


1 Like

Hey there, so I got the icons in place.

The .my- prefix isn’t reserved anywhere in the framework. It was just an arbitrary class name I used so I wouldn’t override the ionic defaults. Plus it makes it easier to know what your code is when debugging.

Thanks Mike. I opened your codepen but nothing is displayed and also I don’t see any text under the icons in the HTML.

I get the my- prefix now, thanks!

Hmm I suspect codepen to be acting up, which it does often. Check it out not on codepen to see it

You are correct, codepen issue! Have it working locally and able to set size/color of icon.

Added text below icon like so:

<div class="col"><a href="" class="button button-icon icon ion-ionic my-icon"><br>text here</a></div>

However, what I was asking is it possible to set icon and text size to be different like as in my screen grab, using the same element? Or would I need two grid rows or divs for each icon, one for the icon and one for the text?

Thanks for your help!

For that you can just move the icon to a it’s own tag, and set it’s display to block.

    <div class="col">
      <a href="" class="button button-icon">
      <i class="icon ion-ionic my-icon"></i>

This way you can control the icons color and size, separate from the text.

Thank you so much Mike! That works fine.

Does the i tag have a src attribute to add a custom icon url ?

Thank you!

No, but you can add a class in i tag in order to achieve this.
<i class="customIcon"></i>

But first check if it exists here: http://ionicons.com/

Thank you for your reply, I actually have an ion list of buttons which each icon url is gotten from data server, It’s simple if we had a src="{{iconUrl}}" attribute. otherwise can you give a way how to define urls icon dinamically in css ?

In this case instead of i tag try with img or on i tag set style="background-image: {{iconUrl}}"

Ok I can do like that, thank you !!

why can not I follow your way?