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#fontaw
esomeregular')
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";
}