Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot resize flaticon with font-size

I am using Flaticon for a website I am developing but there seems to something wrong and I can't find out what.

I downloaded the zip file from flaticon with the option "icon font". so I uploaded it into the my font's folder but for some reason when I link the css and put an <i class="flaticon-crowd"><i> in my html I get the icon in its default size but when I put font-size:70px; in the css it doesn't get bigger.

I can do color: #f00; and the text turns red so it's not the selector. Also in the def tools in chrome show that the 70px font-size is used and not overruled.

Does somebody know what it could be that is causing this problem ?

thanks for your time.

Here is an example of the html I use

<!DOCTYPE html>
<html>
    <head>
        <!-- flaticon -->
        <link rel="stylesheet" type="text/css" href="assets/css/flaticon/flaticon.css">

        <title></title>
    </head>
    <body>
        <i style="font-size: 70px" class="flaticon flaticon-crowd"></i>
    </body>
</html>
like image 421
Controvi Avatar asked Aug 13 '15 10:08

Controvi


People also ask

Why is Flaticon not working?

Try from an incognito window. Try from a mobile device not connected to wifi. Clear cache and delete cookies. Uninstall any adblockers you may have in your computer.

How do I change the width and height of an icon?

Larger Icons To increase the size of icons relative to its container, use icon-large , icon-2x , icon-3x , or icon-4x . Increase the icon size by using the icon-large (33% increase), icon-2x , icon-3x , or icon-4x classes.


1 Answers

Use this class in your css to change the font size.

[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {

font-size: 150px;

}

Hope it will solve your issue.

like image 134
Hasan Tareque Avatar answered Sep 28 '22 08:09

Hasan Tareque