Using Flaticons iconfonts – will not load!

[indyroma]

Hey everyone – I’m new to coding (with focus on css), and am trying to load some icons on a webpage. I would like to use Flaticons iconfronts, and have followed the instructions of downloading their flaticon.css style sheet and attaching it to my html doc in the head using the link they provide: .
My tags have the iconsfonts coded as:
i.e. https://codepen.io/Indyroma/live/rqNMQQ

However, the icons display as a square when loaded on a web page. What happened?
Has anyone used iconfonts from Flaticons before? I really would like to use these because they have exactly what I am looking for in an icon, and I can manipulate it with css, according to Flaticons…
any help would be great!

[Paulie_D]

Your Codepen does not seem to work but I have to ask….did you dowload and link the font files as well as the CSS?

https://stackoverflow.com/questions/43621187/how-do-i-use-icons-from-flaticon-in-my-html

[indyroma]

Thanks for replying! I followed the instruction from Flaticon:
1. download iconfont collection – which included the following files: flaticon.css, flaticon.eot, flaticon.html, flaticon.svg, flaticon.ttf, flaticon.woff
These I saved all in one project folder, which also contains my other docs.
2. Request the CSS stylesheet from the head of your web. – So I linked my html doc
to flaticon.css with the href link flaticon.css
3. Use class for the images, with class “flaticon-imagename” – The flaticon.css includes the images that were in my collection.
https://codepen.io/Indyroma/live/KGwRya
I did not do anything with the flaticon.eot, flaticon.html, flaticon.svg, flaticon.ttf, flaticon.woff. Should I have? I have no idea what I am doing wrong. I have used the svg images before which show up on my site, but they are just images and I cannot manipulate them with css. That is why I am trying out their iconfonts.

[Beverleyh]

Neither of your pens are working – unfortunately they’re not setup to reference externally hosted assets. If you look at the CSS, paths you’ll see that they’re referencing locally hosted files (the ./ parts), put of course these won’t be local to CodePen. Try editing your pen to reference the files located on your own web host – they’ll be more like http://mywebsite.com/path/to/asset.ext

But this might be a hosting issue with mime types instead. If you setup a test page on your computer and it loads there, and only does not work on your web host, you should try looking in to mime types (Google “font mime types hosting” to start your research). You might have to setup associations in .htaccess or web.config (which file you edit depends upon your hosting environment). Alternatively, your web host control panel might provide an area where you can associate mime types instead of editing .htaccess or web.config directly. Check with your web host for further info.

[Beverleyh]

Additional: Use the developer toolbar (F12) when viewing your broken web page and see what that tells you about the missing fonts. There’ll likely be error messages in the elements tab or network tab, that indicate why your font files aren’t working/loading. These messages will help point you to mime type problems or incorrect asset paths.

[peterjohnson]

Where i can take new icons?

[asdeideas]

Hello @peterjohnson

There are several webs to acquire new icons, some examples are: Flaticon (https://www.flaticon.com/), Makerbook (http://makerbook.net/free-icons/) or Iconfinder (https://www.iconfinder.com) among many others. You can just type free icons in google and you will be surprised by the amount of results that you get.

Cheers

[Author]

Posts