lista z ikonami

[gibek2 12]

witam jak w prosty sposób zrobić listę aby przy każdym tekście była ikonka ? jest na to jakiś prostszy sposób niż dodawanie to jako zdjęcie i pozycjonowanie potem tekstu ?

 

chodzi mi o coś takiego ( załącznik )

Edytowano Luty 19, 2014 przez gibek2 (zobacz historię edycji)

[wlodziu 49]

Możesz to zrobić jako lista, czyli dodać obrazek do listy (list-style) i dodawać różne klasy dla każdego wiersza. Możesz także użyć ikon awesome, same się pięknie pozycjonują względem tekstu ( http://fontawesome.io/icons/ )

[gibek2 12]

super, mógł byś trochę podpowiedzieć jak używa się tych awesome bo troche nie za bardzo wiem ;/

[wlodziu 49]

Pobieramy: http://fontawesome.io/assets/font-awesome-4.0.3.zip

katalog css i font najlepiej do głównego katalogu, linkujemy plik css

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

i teraz w naszej liście dodajemy ikonę, np aparat

<li><i class="fa fa-camera-retro"></i> Jakiś wiersz..</li>

Położenia względem tekstu i inne właściwości na stronie z przykładami: http://fontawesome.io/examples/

[Gość Kamikadze]

<img>TEKST<br>
<img2>TEKST2<br>

Jeszcze prościej hehe

[maniack 403]

.

Edytowano Wrzesień 13, 2017 przez maniack (zobacz historię edycji)

[wlodziu 49]

Jeśli o font awesome to powiększa się on razem z tekstem, czyli używasz właściwości font-size i wsio, ikony są wektorowe, więc na jakości nic nie stracisz.

 

A co do pomysłu Kamikadze, to tak.

[maniack 403]

.

Edytowano Wrzesień 13, 2017 przez maniack (zobacz historię edycji)

[wlodziu 49]

Specjalnie dodałem, byś zaczerpnął więcej informacji

[gibek2 12]

dzięki wszystkim

[PapaSmerf 497]

<img>TEKST<br>
<img2>TEKST2<br>

Jeszcze prościej hehe

 

 

Emil, weź dla dobra ludzkości usuń tego potworka. Ani to funkcjonalne, ani zgodne z jakimikolwiek standardami czy dobrymi praktykami.

[Gość Kamikadze]

 

Emil, weź dla dobra ludzkości usuń tego potworka. Ani to funkcjonalne, ani zgodne z jakimikolwiek standardami czy dobrymi praktykami.

 

Hehe

 

Chciał prosto, to prościej się nie da

[PapaSmerf 497]

Chciał prosto, to prościej się nie da

 

A jak ktoś się Ciebie spyta o sposób na poderwanie panienki, to mu powiesz "chloroform FTW"?

[Gość Kamikadze]

Też działa

[maniack 403]

.

Edytowano Wrzesień 13, 2017 przez maniack (zobacz historię edycji)

[wlodziu 49]

Skoro tak to ujmiesz, to czy ojciec pyta dziecka jak je robić?

[PapaSmerf 497]

Skoro tak to ujmiesz, to czy ojciec pyta dziecka jak je robić?

 

Nie łapiesz ironii (vide pierwszy post @maniacka).

[regdos 1848]

 

(...) ani zgodne z jakimikolwiek standardami

 

A jakie standardy mówią, że nie można wstawić obrazka jako img i tekstu za tym?

[PapaSmerf 497]

A jakie standardy mówią, że nie można wstawić obrazka jako img i tekstu za tym?

 

Takie.

[regdos 1848]

Idąc tym tokiem rozumowania to puste <i>, przed którym wstawiany jest tekst poprzez CSS też nie jest zgodne ze standardami.

[Pan Kot 1535]

Nic dziś nie jest zgodne ze standardami na dobrą sprawę .

[PapaSmerf 497]

Idąc tym tokiem rozumowania to puste <i>, przed którym wstawiany jest tekst poprzez CSS też nie jest zgodne ze standardami.

 

Czyli Twoim zdaniem rąbanie danych mających charakter listowy za pomocą znacznika, który nie ma znaczenia semantycznego jest ok? Ok, moim nie jest. Gdy pojawi się tam lista, nie ma problemu.

 

Poza tym, w przypadku FA, nikt nie zmusza nikogo do używania <i>, może być to jakikolwiek inny element, albo pseudoselektory :before lub :after. Osobiście wolę <span>, bo użycie <i> niesie za sobą sporo potencjalnych problemów. Ale to zaczął Bootstrap ze swoimi ikonami, dochodzi do tego, że się ludzie kłócą, że i to.... icon.

 

Z innej beczki, w HTML5 <i> będzie miał zupełnie inne znaczenie:

 

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts.