Font icons BOOTSTRAP/CSS

Asked

Viewed 387 times

-1

I was looking at some sites and I saw that they are using some icons, but without the need to put an image, is used a font, I found it very interesting because you can change size, color without many changes, I would like to know how I can implement this in my code, and if anyone knows the source that this image site uses.

1 answer

2


To implement on your site you can use the fontawesome that today I believe to be the most complete: http://fontawesome.io

After downloading just add to your website like this:

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

someone knows the source that this image site uses.

There is no way to know if you do not inform which site, after all fonts can be created by independent people, drawn in Adodeillustrator, but there is a way to find out using Chrome or Opera:

  • right-click on the icon and select the inspect element/element:

    inserir a descrição da imagem aqui

  • Select from the inspector the element that has the icone class or the pseudo element (::before or ::after):

    inserir a descrição da imagem aqui

See that on the right side of the property font: (or font-family) will have the name of the source used, then just "googlar" the name of the source, if find in interet is probably there to download, if not find is because the source was created by the developer of the site and can not download it (you can even copy from the site you entered, but there may be some licensing implication, however this is not the focus of the conversation).

Note: Looking at their source code I was able to notice that possibly they used this tool http://fontastic.me to generate the custom source.

  • the site is http://m.floresonline.com.br/ is the mobile that has the fonts that I would like to use, it would be possible to know if fonts were created or downloaded?

  • @Gustavosouza does what I taught you, use the element inspector and see the name of the source, then google it and let me know

  • there in the image has the open element inspector, the font used is "font-icon"

  • 2

    @Gustavosouza then it was they who created this font, it was not something that they downloaded ready, so it will not find for download, you can try to copy from their site, but I do not know if there is any license for this, try the font-awesome or glyphicons that are very complete, it’ll be easier.

  • 1

    Got it, thanks a lot for your help!

  • 1

    @Gustavosouza looking at their source code I found what tool they used to generate the source, is this: http://fontastic.me you can create your own icon source.

  • I’ll take a look at the site here and see how it works, thanks so much for the help.

Show 2 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.