html / css icon links

Navigation
2

I could not express myself very well in the title, however it is the following, checking the source code of some sites I came across codes that do not understand how it works ... follow the example 

<tag class='setas'>seta_pra_baixo</tag>

I would like to understand how this linkage is made, because the developer puts inside the tag information that pulls the image that he wants, someone can explain it to me, and an example of the css code ..

    
asked by anonymous 15.09.2016 / 07:31

1 answer

2

I believe you are referring to the use of Icon Web Fonts, implemented with CSS.

Basically you have to include the CSS code for the Web Font, which will include the font files.

Formatting HTML will depend on the font distributor you are using.

There are several options, some of which are available free:

UPDATE: How does it work?

The font files are compiled with an index for each character drawing.

For example: ARIAL font has the 'a' index for the letter 'a' drawing.

In the case of icons, it is the same thing, but the index for the drawing is something more intuitive like: arrow_upward , which is the index for drawing the "UP ARROW" icon .

Note: There may be more than one index for the same drawing / character in a font. (see example code example below)

In the example below (with Google Material Icons):

  • the web source created ( @font-face ) the source pointing to its source file (s).
  • class material-icons basically tells you which font to use and the RESET of this font's settings (size, border, borders, decoration, etc.).

Example font and font RESET CSS: 

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  @include icone_reset();
}
@mixin icone_reset(){
    position: absolute;
    font-weight: normal;
    font-style: normal;
    font-size: 1.2em;  /* Preferred icon size */
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

See the code snippet below, using Google Material Icons , I used:

  • an existing "index" for the "Contact Phone" drawing;
  • an existing "index" for the "Up arrow" drawing;
  • the two "indexes" above in a single Tag.
  • an invalid "index" (which will not return anything). 

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

Índice existente:
<i class="material-icons">contact_phone</i>
<br/><br/>
Índice existente:
<i class="material-icons">arrow_upward</i>
<br/><br/>
Dois índices existentes (dois desenhos em uma só tag: equivale a um texto com duas letras):
<i class="material-icons">contact_phonearrow_upward</i>
<br/><br/>
Um índice inexistente (não retorna nada):
<i class="material-icons">abc</i>
<br/><br/>
Índice existente (outro índice para o mesmo desenho "Seta para cima":
<i class="material-icons">&#xE5D8;</i>

If you want to create your own font file, take a look at this tutorial: How to turn your icons into a web font

    
15.09.2016 / 12:41
ionic record audio not back to view How to set a GridView read-only line made with DevExpress?