Icons & buttons - change size, color & text position

ionic-v1
1

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?

Thanks!

1 Like
2

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.

3

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!

4

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

5

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!

6

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>
      Text
      </a>
    </div>

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

7

Thank you so much Mike! That works fine.

9

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

Thank you!

10

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/

11

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 ?

12

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

13

Ok I can do like that, thank you !!

14

why can not I follow your way?