znaczacy > comp.lang.* > comp.lang.javascript

Roman Tyczka (24.01.2019, 13:59)
Mam zrobione w Bootstrapie 4 menu, z jedna pozycja rozwijana w dól. Dodalem
tam sobie ikonki i zaczelo to wygladac koszmarnie:



kod tego submenu:

<div class="dropdown-menu" role="menu">
<a class="dropdown-item" role="presentation" href="#">
<i class="fa fa-fax text-primary"></i><span>&nbsp;Jeden</span>
</a>
<a class="dropdown-item" role="presentation" href="#">
<i class="fa fa-info text-primary"></i><span>&nbsp;Dwa</span>
</a>
<a class="dropdown-item" role="presentation" href="#">
<i class="fa fa-copy text-primary"></i><span>&nbsp;Trzy</span>
</a>
</div>

Jak spowodowac by opisy pozycji menu byly równo, w jednej linii w pionie i
nie zalezaly od szerokosci ikonek?
Borys Pogorelo (24.01.2019, 15:40)
Dnia Thu, 24 Jan 2019 12:59:14 +0100, Roman Tyczka napisal(a):

> Jak spowodowac by opisy pozycji menu byly równo, w jednej linii w pionie i
> nie zalezaly od szerokosci ikonek?


Zamien ikone na element typu inline-block (o ile juz takim nie jest) i
nadaj mu okreslona szerokosc. Albo wstaw ikone w tlo danego elementu +
padding z lewej.
zpksoft (24.01.2019, 18:05)
>ciach
> Albo wstaw ikone w tlo danego elementu +
> padding z lewej.
> --
> Borys Pogorelo
> borys(#)leszno,edu,pl


Pewnie jest ikona w tle, ale dlaczego w tle znacznika <i>? (co tu jest italic?)

Zapewne klasy fa-fax, fa-info i fa-copy to definiuja.

Pawel
Roman Tyczka (24.01.2019, 21:40)
On Thu, 24 Jan 2019 08:05:20 -0800 (PST), zpksoft wrote:

>> Albo wstaw ikone w tlo danego elementu +
>> padding z lewej.

> Pewnie jest ikona w tle, ale dlaczego w tle znacznika <i>? (co tu jest italic?)


Swiat jest na innym etapie, <i> to juz nie italic:

"In earlier versions of the HTML specification, the <i> element was merely
a presentational element used to display text in italics, much like the <b>
element was used to display text in bold letters. This is no longer true,
as these tags now define semantics rather than typographic appearance. A
browser will typically still display the contents of the <i> element in
italic type, but is, by definition, no longer required to."

Teraz <i> jest blizej do <icon> niz <italic>, zaleca go sam oogiel, buk
internetów:

Roman Tyczka (24.01.2019, 21:42)
On Thu, 24 Jan 2019 14:40:30 +0100, Borys Pogorelo wrote:

>> Jak spowodowac by opisy pozycji menu byly równo, w jednej linii w pionie i
>> nie zalezaly od szerokosci ikonek?

> Zamien ikone na element typu inline-block (o ile juz takim nie jest) i
> nadaj mu okreslona szerokosc.


Dzieki, tak zrobilem i jest miodzio.

> Albo wstaw ikone w tlo danego elementu + padding z lewej.


A jak sie wstawia w tlo? Czy chodzi o CCSowe:

background-image: url("paper.gif");

Czy to zadziala z ikonami fontowymi typu awesome?
Borys Pogorelo (25.01.2019, 03:28)
Dnia Thu, 24 Jan 2019 20:42:14 +0100, Roman Tyczka napisal(a):

> Czy to zadziala z ikonami fontowymi typu awesome?


Nie zadziala, musisz z nich zrobic osobny element (lub przynajmniej
pseudoelement). Do sztuczki z tlem potrzebujesz SVG.
zpksoft (25.01.2019, 14:30)
W dniu czwartek, 24 stycznia 2019 20:40:03 UTC+1 uzytkownik Roman Tyczka napisal:
> On Thu, 24 Jan 2019 08:05:20 -0800 (PST), zpksoft wrote:
> >> Albo wstaw ikone w tlo danego elementu +
> >> padding z lewej.

> > Pewnie jest ikona w tle, ale dlaczego w tle znacznika <i>? (co tu jest italic?)

> Swiat jest na innym etapie, <i> to juz nie italic:


A zrobiles test? :)

> "In earlier versions of the HTML specification, the <i> element was merely
> a presentational element used to display text in italics, much like the <b>
> element was used to display text in bold letters. This is no longer true,
> as these tags now define semantics rather than typographic appearance. A
> browser will typically still display the contents of the <i> element in
> italic type, but is, by definition, no longer required to."


A ten cytat to skad? Zreszta zapytam Googla

> Teraz <i> jest blizej do <icon> niz <italic>, zaleca go sam oogiel, buk
> internetów:
>


jakos to do mnie nie przemawia.
cyt: <i class="material-icons">face</i>
kazdemu znacznikowi mozesz przypisac jakas klase wiec przypisanie jej pod <i> nie wiem dlaczego mialoby byc interpretowane jakos szczególnie.
Napisz np. <bla class="material-icons">face</bla> i zobacz jak to zadziala.

> --
> pozdrawiam
> Roman Tyczka


Pawel
Roman Tyczka (25.01.2019, 15:08)
On Fri, 25 Jan 2019 04:30:10 -0800 (PST), zpksoft wrote:

>>>> Albo wstaw ikone w tlo danego elementu +
>>>> padding z lewej.
>>> Pewnie jest ikona w tle, ale dlaczego w tle znacznika <i>? (co tu jest italic?)

>> Swiat jest na innym etapie, <i> to juz nie italic:

> A zrobiles test? :)


A czytales to co jest ponizej?
Czyli: " A browser will typically still display the contents of the <i>
element in italic type, but is, by definition, no longer required to".

> jakos to do mnie nie przemawia.
> cyt: <i class="material-icons">face</i>
> kazdemu znacznikowi mozesz przypisac jakas klase wiec przypisanie jej pod <i> nie wiem dlaczego mialoby byc interpretowane jakos szczególnie.
> Napisz np. <bla class="material-icons">face</bla> i zobacz jak to zadziala.


Moze do Ciebie nie przemawiac, ale jest taka konwencja i tyle, nikt Cie nie
zmusza do podazania za swiatem, mozesz isc w druga strone, wolna wola.
zpksoft (25.01.2019, 15:24)
> Moze do Ciebie nie przemawiac, ale jest taka konwencja i tyle, nikt Cie nie
> zmusza do podazania za swiatem, mozesz isc w druga strone, wolna wola.
> --
> pozdrawiam
> Roman Tyczka


A czy ja twierdze ze ktos mnie zmusza? Ja nie krytykujesciezki która podazasz.
Artykuuje swoje zdanie. Mozesz go nie czytac.

Co do ikon to raczej stosuje tzw. htmlentities a nie obrazki (jpg, gif, svg czy inne).

Pawel
Roman Tyczka (25.01.2019, 15:35)
On Fri, 25 Jan 2019 05:24:33 -0800 (PST), zpksoft wrote:

>> Moze do Ciebie nie przemawiac, ale jest taka konwencja i tyle, nikt Cie nie
>> zmusza do podazania za swiatem, mozesz isc w druga strone, wolna wola.


> A czy ja twierdze ze ktos mnie zmusza? Ja nie krytykuje sciezki która podazasz.
> Artykuuje swoje zdanie. Mozesz go nie czytac.


Tak samo jak ja.

> Co do ikon to raczej stosuje tzw. htmlentities a nie obrazki (jpg, gif, svg czy inne).


Ja tez nie uzywam grafik w podanym przykladzie.
Podobne wątki