How to use the Icon tag in HTML?

Asked

Viewed 33,037 times

3

I want to use a 'flexinha' next to the text of the button. I tried to use the symbols of the keyboard itself, but the site I want to insert does not accept. I can use the icon tag, as it is used to put the logo in the title of the site?

html tags

3 answers

6

I do not know such tag (icon). To insert an icon, you can add the class name of the icon to any HTML element inline.

The elements <i> and <span> are the most used to add icons.

You should include a file with a biblioteca de ícones to be able to use the classes.

Library example:

http://fontawesome.io/examples/

Example of use:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<div><i class="fa fa-home">Home</i></div>
<div><i class="fa fa-search">Busca</i></div>
<div><i class="fa fa-cloud">Nuvem</i></div>
<div><i class="fa fa-trash">Lixo</i></div>

2

Follow the example: 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<button>
  <i class="fa fa-chevron-down" aria-hidden="true"></i>
  Abrir
</button>

Using the Font Awesome you can add icons (WEBSITE)

Remembering that you have other alternatives with the FONTELLO, with it, you can select only the icons you will use and download the package using a similar way to FontAwesome

2

Good morning!

I usually use the following format, for example:

<a href="#">
       <i class="fa fa-file-text-o"></i><span>Atendimento<i class="fa fa-angle-down"></i></span>
</a>

Are famous 2 types of icones, the icones of the Font Awesome or those of Bootstrap, ai goes from which you prefer, I usually use the framework Bootstrap and use the icons from Font Awesome.

Follow a link from Font Awesome where it has the icons and how to use them.

Icones Available: http://fontawesome.io/icons/

How to use: http://fontawesome.io/get-started/

When clicking on an icon, a new page is opened explaining how to use that specific icon. Remembering that it is also possible to style the tags with CSS <i>.

Browser other questions tagged html tags

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