Witam,

Mamy np. material icons Googla. Fonty umieszczamy na stronie za pomocą:

<tag class="material-icons">nazwa</tag>

W jaki sposób "nazwa" zamieniana jest na konkretny obrazek? Nie ma do
tego ani selektorów CSS ani kodu JS.

--
Pozdrawiam,
Marek

do góry

On Friday, April 6, 2018 at 2:14:17 PM UTC+2, Marek S wrote:

> W jaki sposób "nazwa" zamieniana jest na konkretny obrazek? Nie ma do

to ligatury

do góry

W dniu 2018-04-07 o 14:34, satellite pisze:
> On Friday, April 6, 2018 at 2:14:17 PM UTC+2, Marek S wrote:
>
>> W jaki sposób "nazwa" zamieniana jest na konkretny obrazek? Nie ma do
>
> to ligatury
>

Niby jak otrzymać w ten sposób np. ikonę Androida (2-gi rząd) lub
jakąkolwiek inną z poniższego zbioru?

https://material.io/icons/

Analizując ruch sieciowy wyraźnie widzę, że nie są to ligatury lecz
czcionka. Każdy obrazek to jeden znak.

Tak czy owak ma to związku z moim pytaniem. A pytanie brzmiało: w jaki
sposób na podstawie tekstu i bez zastosowania CSS/JS zamienić tekst w
tagu w konkretny znak?

--
Pozdrawiam,
Marek

do góry

Dnia Sat, 7 Apr 2018 20:06:59 +0200, Marek S napisał(a):

> Tak czy owak ma to związku z moim pytaniem. A pytanie brzmiało: w jaki
> sposób na podstawie tekstu i bez zastosowania CSS/JS zamienić tekst w
> tagu w konkretny znak?

Musisz mieć font ze zdefiniowanymi ligaturami, w tym przypadku korzystasz z
ligatury "android":

https://github.com/google/material-design-icons/blob
/master/iconfont/codepoints
http://alistapart.com/article/the-era-of-symbol-font
s

--
Borys Pogoreło
borys(#)leszno,edu,pl

do góry

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".

--
Pozdrawiam,
Marek

do góry

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";
}

do góry

W dniu 2018-04-10 o 14:22, Tomek pisze:

> 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ę

Nie rozumiem w czym rzecz bo cały czas dochodzi do nieporozumień. Być
może ja czegoś nie ogarniam.

W przykładzie jaki pokazuje masz CSS, który tą falgę wyświetla. Klasa
nazywa się fa-flag i sam ją cytujesz:

.fa-flag:before {
content: "\f024";
}

A teraz spróbuj ostylować coś takiego:

<span class="fa">fa_flag</span>

aby wyświetlić tą samą flagę. A następnie zmień ciąg znaków:

<span class="fa">fa_volume_off</span>

by wyświetlić "mute". Jak tego dokonasz?

--
Pozdrawiam,
Marek

do góry

W dniu 07.04.2018 o 20:06, Marek S pisze:
> W dniu 2018-04-07 o 14:34, satellite pisze:
>> On Friday, April 6, 2018 at 2:14:17 PM UTC+2, Marek S wrote:
>>
>>> W jaki sposób "nazwa" zamieniana jest na konkretny obrazek? Nie ma do
>>
>> to ligatury
>>
>
> Niby jak otrzymać w ten sposób np. ikonę Androida (2-gi rząd) lub
> jakąkolwiek inną z poniższego zbioru?
>
> https://material.io/icons/
>
> Analizując ruch sieciowy wyraźnie widzę, że nie są to ligatury lecz
> czcionka. Każdy obrazek to jeden znak.
>
> Tak czy owak ma to związku z moim pytaniem. A pytanie brzmiało: w jaki
> sposób na podstawie tekstu i bez zastosowania CSS/JS zamienić tekst w
> tagu w konkretny znak?
>


Jakbyś lepiej poklikał w link co sam dałeś to byś znalazł odpowiedź w 5 min.

http://google.github.io/material-design-icons/#icon-
font-for-the-web
http://alistapart.com/article/the-era-of-symbol-font
s

do góry

W dniu 11.04.2018 o 09:51, Tomek pisze:

>
> Jakbyś lepiej poklikał w link co sam dałeś to byś znalazł odpowiedź w 5
> min.

W linku jaki dałem nie ma informacji na poruszony temat. Nie zadawałabym
pytania na forum gdyby tam była odpowiedź.

Ponadto gdybyś odpowiedział mi wprost jak odbywa się konwersja ciągu
znaków w pojedynczy znak, to zajęłoby to Tobie mniej czasu niż takie
komentarze.

> http://alistapart.com/article/the-era-of-symbol-font
s

Wynika z tego, że fonty same w sobie posiadają możliwość mapowania ciągu
znaków w pojedynczy znak. Przeglądarka korzysta z tego mechanizmu. Czy tak?

--
Pozdrawiam,
Marek

do góry

W dniu 11.04.2018 o 10:16, Marek S pisze:
> W dniu 11.04.2018 o 09:51, Tomek pisze:
>
>>Nie zadawałabym pytania na forum gdyby tam była odpowiedź.
>

Linki, które podałem i gdzie jest odpowiedź na Twoje pytania
znalazłem wyłącznie sprawdzając link, który sam przysłałeś.
Nie użyłem wyszukiwarki.


> Wynika z tego, że fonty same w sobie posiadają możliwość mapowania ciągu
> znaków w pojedynczy znak. Przeglądarka korzysta z tego mechanizmu. Czy tak?
>

O takim nowym mechanizmie to ja się dowiedziałem też dopiero dzisiaj i
za bardzo tego nie testowałem.

Cały czas można użyć starego mechanizmu
np
<i class="material-icons">&#xE87C;</i>


Skopiowane z linków, które podałem wcześniej
----------------------------------------------------
--------------------


Using the icons in HTML

It's easy to incorporate icons into your web page. Here's a small example:
face
<i class="material-icons">face</i>

This example uses a typographic feature called ligatures, which allows
rendering of an icon glyph simply by using its textual name. The
replacement is done automatically by the web browser and provides more
readable code than the equivalent numeric character reference.

This feature is supported in most modern browsers on both desktop and
mobile devices.
Browser Version supporting ligatures
Google Chrome 11
Mozilla Firefox 3.5
Apple Safari 5
Microsoft IE 10
Opera 15
Apple MobileSafari iOS 4.2
Android Browser 3.0

For browsers that do not support ligatures, fall back to specifying the
icons using numeric character references like the example below:
?
<i class="material-icons">&#xE87C;</i>

Find both the icon names and codepoints on the material icons library by
selecting any icon and opening the icon font panel. A codepoints index
is also available on our git repository which shows the complete set of
names and character codes.

do góry