Control Ionicon icon size

ionic-v1
1

I’m struggling to get the Ionicon icons to the desired size while using a “lonely” <i class="icon ionicon-whatever-icon-i-want-to-use></i> tag. I’d like to create a sort of splash screen with just an image and a fairly big ion-loading-c icon; however, the icon keeps showing up with a tiny size and I can’t really find a way to control it (without explicitly inserting a .png, of the same icon, which feels weird…).

Thank you!

2 Likes
2

Ionicons are font icons.
Have you already tried to add a css line to your app, like:

i.your-class.ion-loading-c {
  font-size: 90px;
}

?

20 Likes
3

Yeah, that works. Thank you for the help and sorry for the dumb question…

4

Glad it helped and don’t worry @pmarchezz, it’s learning :slight_smile:

1 Like
5

Hi, i bump this thread
i’m really new to coding and new to ionic too.
I’m doing an UI app and i want to understand how does it work.

I did a simple button with an centered icon, but i can’t figure how to change the icon size, here is my code :smile:

i tried font-size = 100 but it doesn’t works, any help ?
Thank you :smile:

6

Have you set with px?

7

Friend,

my role was always Desktop developer (Delphi, .net WPF) and background services (webservices, rest services…), but now I need move to web reality. I have a basic knowledge of CSS… would you mind suggesting me some resources, book, to learn more about it?

thank you

8

Not a dumb question! Helped me :smile:

9

I like to keep my CSS styles reusable, so I do it as follows.

In style.css, I declare a helper style “larger” as follows:

.larger {
    font-size: larger;
}

And then I can simply code it like this, adding the “larger” class to the HTML element:

<i class="icon ionicon-whatever larger"></i>

This way, I’m keeping my ‘concerns’ separated and my styles reusable.

6 Likes
10

Had the same issue here. Actually, the usage of <i class='icon icon-anything'></i> will inject content via css pseudo-selector ::before. So, to change the size of your icons you should go for a css like:

i.icon::before {
    font-size: 90px;
}
3 Likes
11

Maybe you can have a try for this

In html:

In your css file set font size to your prefer (large, x-large, xx-large, 200%, 300% …)
.mybtnstyle::before {
font-size: xx-large;
}

cheers

1 Like
12

To learn the basics , this is an excellent source: http://www.w3schools.com/

13

my html code is here

`<div class="list">
      <a class="item item-thumbnail-left" herf="#">
          <img src="img/image/cover_03.png">
          <h2>Here is my resume.</h2>
          <p>
              View my <b>Linkedin</b> profile.
              <p>
                  <i class="ion-chevron-right"> read more...</i>
              </p>
          </p>
      </a>
  </div>`

my css

i.ion-chevron-righ{ font-size: 300px; color : red; }

and the icon size is not increasing.
any idea ? please.

14

@shohan4556
You have a typo right there in your CSS class, you simply missed a T :smile:

i.ion-chevron-right{
font-size: 300px;
color : red;
}

15

Oh sheet sorry to bother :neutral_face: and thanks to replay

16

Really worked really well for me. Thanks.:heart_eyes:

17

Yeah, I tried doing so, but it does not work

<button class="button button-large button-outline">
        <i class="icon ion-social-facebook"></i>
</button>

i.ion-social-facebook {
	color: #fff;
	font-size: 200px;
}
1 Like
18

i replaced icon with my style and it worked. Sorry for the mistake. And thanx… :slight_smile:

19

To change size icons seems to be good but what’s going on when that pixels are render on different device screen. My question is because i am android developer and when you develop for android you work with DP (Density-Independ Pixel). How i ensure, It resized icon will be showed right for all device. Sorry my bad english.

20

Just write
.icon-name{font-size:10px;}
For Example .ion-social-facebook{font-size:15px !important;}