Fontello-icon color fontow

Question

Witam. Używam w swoim projekcie fontow z fontello.com. W pliku fontello.css określam kolor danego fonta poprzez dopisanie color:red: ale co jeżeli cchce użyć na ej samej stronie dwa razy tego samego fonta w dwóch rożnych kolorach ;)?w jaki sposób użyć fonta no. W kolorze blue. ? Pozdwiam

Answer 1

Do stylowania elementów służą classy. Element na stronie może posiadać więcej niż jedną classę, dzięki czemu możesz łączyć je w grupy.

Comments

<i class="icon-ok"></i>

to jest ikona ;) jak nadam style w fontello.css np. color:red; to ikona robi sie czerowna

<i class="wybor" class="icon-ok"></i>

i jak w stylach style.css zrobie:

.wybor
{
color:yellow;
}

to nie robi sie żółta ikona....

---

Jeśli chcesz nadać elementowi wiele klas, to oddziel je spacją:

<i class="wybor icon-ok"></i>

W niedługim czasie może Ci się przydać również świadomość obecności i umiejętność stosowania CSS Specificty (gdy zaczniesz się głowić, dlaczego dany styl nie działa)

---

Witam dzieki za info ogólnie chodzilo mi zeby wrzucic ikone fontello jaki przycisk udalo mi sie wrzucilem ikone i za pomoca fontello,css zrobilem hovera po najechaniu zmienia mi sie kolor ;) tak jak być powinno.

.icon-plus:hover:before { content: '\e800'; color:lime;  font-size:20px;} /* '' */

ale chce jeszcze ze po nacisnieciu na ikonke ja deaktywowac zeby juz hover nie dzialal.. w jaki sposob to zrobic?? Magiczna kombinacja ?? 

---

:hover działa, gdy myszką najedziesz na element - gdy zabierzesz z niego kursor myszki, to hover nie będzie już wpływał na styl.

Może chodzi Ci o klik? Na zdarzenie 'click' (to już w JavaScript) zdejmij klasę, która Ci nie odpowiada

Answer 2

O ile dobrze pamiętam Pan Mirosław w swoim tutorialu zmienia styl w pliku fontello.css.
Osobiście używam innego sposobu.

Nadaj nową klasę ( jeżeli chcesz pokolorować je w ten sam sposób ) , bądź id ( jeżeli ikona będzie miała unikatowy kolor, wielkość itp. ) ikonie ( w znaczniku owej ikony ). Potem przejdź do swojego stylu i nadaj mu odpowiednie parametry do konkretnej ikony. Sposób pozwala na wprowadzenie różnych parametrów do ikon , których używasz częściej niż raz.

Powodzenia ! :)

Comments

<i class="icon-ok"></i>

to jest ikona ;) jak nadam style w fontello.css np. color:red; to ikona robi sie czerowna

<i class="wybor" class="icon-ok"></i>

i jak w stylach style.css zrobie:

 

.wybor
{
color:yellow;
}

tonie robi sie żółta ikona....

---

klasy łączy się i wstawia w jeden class np.

class="icon-ok wybor"

---

Witam dzieki za info ogólnie chodzilo mi zeby wrzucic ikone fontello jaki przycisk udalo mi sie wrzucilem ikone i za pomoca fontello,css zrobilem hovera po najechaniu zmienia mi sie kolor ;) tak jak być powinno.

.icon-plus:hover:before { content: '\e800'; color:lime;  font-size:20px;} /* '' */

ale chce jeszcze ze po nacisnieciu na ikonke ja deaktywowac zeby juz hover nie dzialal.. w jaki sposob to zrobic?? Magiczna kombinacja ?? 

Answer 3

Możesz nadać ikonie id lub klase