search

erikflowers / weather-icons

215 Weather Themed Icons and CSS
https://github.com/erikflowers/weather-icons
6.9k stars 851 forks source link

How to make it bigger #129

Closed hejinqiao closed 8 years ago

hejinqiao commented 8 years ago

Hi, I have been looking for the code to scale the icon, but I only saw wi-fw, which does not work for me. Would you mind showing me how to make my icon bigger?

d2s commented 8 years ago

@hejinqiao Adjust the font-size to your preferred icon size, as seen in the following example (from the source code of documentation site).

.icon-wrap .icon,
.icon-wrap .wi {
    font-size: 40px;
}

Extra tip: Use tools like Chrome Developer Tools to inspect individual page elements to find out how CSS styles work. Live editing of styles is also possible, so you can experiment with actual sites to understand better how they are built.

erikflowers commented 8 years ago

Size is controlled by CSS font-size. There aren't any built in controls for sizing as everyone needs it differently. FW is just so that the icons are all the same width in the container, it doesn't change the size.

There are countless ways to target how you want the icons sized, so I can't really recommend a best way other than to choose where you want to apply font-size most logically.

hejinqiao commented 8 years ago

@d2s Thank you, it works! And thank you for your kind advice!

hejinqiao commented 8 years ago

@erikflowers Understood. Thank you!