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...follows the example
<tag class='setas'>seta_pra_baixo</tag>, well wanted to understand how this link is made, because the developer puts inside the tag information that pulls the image he wants, someone can explain me this, and gives an example of the css code..
2
I believe you are referring to the use of Web Icon Fonts, implemented with CSS.
Basically you have to include the CSS code for the Web Source, which will include the source files.
HTML formatting will depend on the distributor of the source you use.
There are several options, here are some free options available:
UPDATE: How it works?
Source files are compiled with an index for each character design.
For example: the source ARIAL has index 'a' for the drawing of the letter 'a'.
In the case of icons, it is the same thing, but the index for the drawing is something more intuitive as for example: arrow_upward, which is the index for the icon design "UP ARROW".
Note: There may be more than one index for the same drawing/character in a source. (see the code snippet example below)
In the example below (with Google Material Icons):
@font-face) the source pointing to the respective source(s) (s) files(s).material-icons basically informs which font will be used and the RESET of the settings of this font (size, margin, edges, Decoration, etc.).Sample RESET CSS from source and source:
@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 that in the code snippet below, using the Google Material Icons, used:
<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"></i>If you want to create your own font file, take a look at this tutorial (in English): How to turn your icons into a web font
Thank you Alan, that’s what I wanted to understand, now let me ask you, is there any way I can do this myself without using third parties, I can create my own css and make this link from Dice or is it very complex? I liked the way because it speeds up the development.
Yes, but you will have to create/own all Svgs.... Have a look at this link http://www.webdesignerdepot.com/2013/04/how-to-turn-your-icons-into-a-web-font/
Browser other questions tagged html css
You are not signed in. Login or sign up in order to post.
Is there an example of where you saw this? CSS can’t take what’s inside the tag and make a conditional to, from that content, render an icon. Maybe you’re talking about font icons (such as the Font Awesome) where the icon is set by the class, not by the content of the tag. It would be clearer if you gave an example...
– Renan Gomes
Renan, so my question looks an excerpt of the code of the site I saw, <i class="material-icons right">keyboard_arrow_down</i>, in this code it shows icon of a downward arrow positioned to the right, da para percerber that the icon and positioning is caught by the class, now the image to be selected is chosen by the content inside the tag, so much so that the "keyboard_arrow_down" is not displayed on the page.
– Dunga Cardoso