I Can't style the size of my icons in Sencha Architect with html and css

Question

I was wondering why I can't seem to increase the size of my icon.

This is my config html:

<i class="fa fa-hand-o-up"></i>

in my stylesheet I'm doing this:

.fa-hand-o-up{
   color: white;
   font-size: 50px;
}

The color works but the font-size doesn't, can someone help me?

Use your browser dev tools to figure out where the font-size for that element actually comes from, there’s likely a rule with higher specificity. — misorude, Oct 01 '18 at 10:22

score 1 · Answer 1 · answered Oct 01 '18 at 10:25

1

Try this

<i class="fa fa-hand-o-up" style="font-size:50px;color:white;"></i>

answered Oct 01 '18 at 10:25

Thanks for the reply but it does't do anything :( – gerben schipper Oct 01 '18 at 11:24

score 1 · Answer 2 · edited Oct 01 '18 at 12:45

1

Try adding replace font-size: 50px line of your CSS by font-size: 50px !important

edited Oct 01 '18 at 12:45

M.javid

answered Oct 01 '18 at 10:26

Abdul Basit

Thanks for the reply but it does't do anything :( – gerben schipper Oct 01 '18 at 11:26

Abolfazl Panbehkar · Answer 3 · 2018-10-01T10:32:36.410

1

To increase Font Awesome icon size you can use "fa-2x", "fa-3x",... classes:

<i class="fa fa-hand-o-up fa-2x"></i>

edited Oct 01 '18 at 10:32

answered Oct 01 '18 at 10:27

I already tried this because if i look it up, this is what is says but for some reason it does''t work – gerben schipper Oct 01 '18 at 11:21

score 1 · Accepted Answer · edited Oct 01 '18 at 15:39

1

Try this:

.fa.fa-hand-o-up {
  font-size: 50px !important;
}

edited Oct 01 '18 at 15:39

halilb

answered Oct 01 '18 at 13:09

Reena Patil

4 Answers4