Geek Answers Handbook

Unable to resize flaticon with font size

I am using Flaticon for a website that I am developing, but there seems to be something wrong and I cannot figure out what.

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

I can do color: #f00; , and the text turns red, so it is not a selector. Also in the def tools in chrome it is shown that the font size of 70px is used, not canceled.

Does anyone know what could be causing this problem?

thank you for your time.

Here is an html example that I am using

 <!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>
+7
source share
9 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 this solves your problem.

+5
source

The best solution would be:

 [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after { font-size: 1em; }

The icon size can then be resized by other classes using font-size

+8
source

This worked for me:

 .flaticon-fast46::before{ font-size: 40px;}
+1
source

you can add !important to your css declaration

For instance:

 font-size:100px !important;
0
source

Use the pseudo-class: before changing the icon the way you want. You can apply all css text properties to change the icons.

 .flaticon-crowd:before { font-size: 17px; }
0
source

In flaticons.css, change the default class to this:

 [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after { font-family: "Flaticon" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
0
source

He worked for me. Add :before after the class of the element you want to use for the icons.

 span:before{ font-size: 50px; }
0
source

the flaticon.css file contains a line that determines the font size: 20px; this applies to all flat icons. You can delete this entry to freely edit individual icons, or you can specify the preferred size of the icons on the same line that will be displayed in all the icons.

0
source

Just remove the 'font-size: 20px;' found in flaticon.css file, and then you can set the desired size in your css file.

-1
source

More articles:


All Articles