🚀 go-pugleaf

W dniu 10.04.2018 o 09:24, Marek S pisze:
> W dniu 10.04.2018 o 00:38, Borys Pogoreło pisze:
> 
>>
>> Musisz mieć font ze zdefiniowanymi ligaturami, w tym przypadku 
>> korzystasz z
>> ligatury "android":
> 
> Tak, to wiem. Tylko za diabła nie wiem w jaki sposób tag:
> 
> <tag class="material-icons">nazwa</tag>
> 
> konwertowany jest na androida czy inną ikonkę. Rozumiałbym gdyby pod 
> literą A kryła się ikona androida a pod B ikona Apple w danym foncie. 
> Natomiast nie rozumiem w jaki sposób ciąg znaków zamieniany jest na 
> jeden znak. W tym przypadku ciągiem znaków jest "nazwa".
> 

Pod spodem fragment jak to jest zrobione w fontawesome.
Podobnie jest w bootstrapie i innych.

np:
<span class="fa fa-flag"></span>
i widzisz flagę

------------------------------------------------------------

@font-face {
   font-family: 'FontAwesome';
   src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
   src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') 
format('embedded-opentype'), 
url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), 
url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') 
format('svg');
   font-weight: normal;
   font-style: normal;
}
.fa {
   display: inline-block;
   font: normal normal normal 14px/1 FontAwesome;
   font-size: inherit;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

[...]

.fa-flag:before {
   content: "\f024";
}
.fa-headphones:before {
   content: "\f025";
}
.fa-volume-off:before {
   content: "\f026";
}
.fa-volume-down:before {
   content: "\f027";
}
.fa-volume-up:before {
   content: "\f028";
}