Šī Pure CSS ikonas ir visas, ko vēlas Frontend Izstrādātāji
Adobe dizainers Wenting Zhang izveidoja interesanta tīmekļa lietotne par radot tīras CSS ikonas. Tas ir vienkārši nosaukts “CSS ikona” un tas var būt viens no stilīgākajiem ikonas ģeneratori Frontend izstrādātājiem.
Šis projekts ir pilnīgi bez maksas un atvērts no GitHub lai jūs varētu brīvi lejupielādēt un sajaukt ar kādu no kodiem.
Šīs ikonas nav CSS atkarību vai ir nepieciešamas īpašas pārlūka funkcijas. No pirmā acu uzmetiena tas var šķist, ka ikonas ir veidotas uz SVG, bet viņi tiešām ir tikai divs.
Ar CSS burvību jūs varat veidot pielāgotas līnijas ikonas par kopīgi interfeisa elementi piemēram, hamburgeru izvēlne, trīspunktu ikona vai drukas ikona (starp daudziem citiem).
Jūs varat izvēlēties plānas līnijas ikonas vai tumšas piepildītas ikonas. Viņi abi izmanto līdzīgas CSS īpašības un jūs pat varat redzēt, kas tie ir, noklikšķinot uz jebkuras ikonas sarakstā. Jūs redzēsiet a bīdāmā sānjosla ar HTML un CSS kodu kopā ar ikonu palielināts.
Ja skatāties augšējā labajā stūrī kodu laukos, redzēsiet a maz kopiju ikona. Noklikšķiniet uz automātiski kopē kodu jūsu starpliktuvē. Ak, un šī kopijas ikona? Arī ar Wenting tīru CSS kodu.
Uz mainīt krāsu jebkuras ikonas, vienkārši Atrodi krāsa īpašums galvenajā ikonas klasē. Atjaunināšana krāsa īpašums arī viss pārējais.
Tā kā šīs ikonas ir diezgan vienkārši, viņi, iespējams, nedarbosies katrā tīmekļa vietnē. Bet tas ir a atdzist alternatīva attēliem vai ikonu fontiem un tas ir pilnīgi bez maksas.
Pārbaudiet CSS ikonas mājas lapa uz skatīt vairāk piemēru un uz kopēt / rediģēt avotu. Jūs varat arī pārbaudiet katru ikonu atsevišķi CodePen, ja vēlaties rotaļlieta ar avotu pārlūkprogrammā.
