Icon sizes: How can I resize them?

[TonyS]

Hi Helpful community

I have a wordpress site, and can input custom css into the styling menu so is there someone who could help solve this problem?

I have 3 orange icons on the home page, “stay active” , “feel at home” and “go explore”

Is there a custom css code that someone has that would allow me the freedom to change the size of these icons?

Thanks

Tony

[Beverleyh]

You should be able to work things out more easily if you use the Developer Toolbar – F12 in most browsers. Use it to inspect the element in question, and edit/add CSS in the styles pane. The styles pane will also give you the appropriate element selector so that you can transfer the custom/revised CSS to your stylesheet.

[grebre0]

It depends on icon type.
If it’s inline svg/img icon (may looks something like this <svg class="my-icon"> or <img class="my-icon" />) try to use

.my-icon {
    width: 100px;
    height: 100px;
}

If icon is used not inline but as a background (may looks something like this<i class="my-icon"></i>) try to use

.my-icon {
    width: 100px;
    height: 100px;
    background-size: 100% 100%;
}

If it’s from icon font (may looks something like this<i class="my-icon">twitter</i>) try to use

.my-icon {
    font-size: 100px;
}

[Author]

Posts