גלריה זו של סמלים טהור CSS הוא מה כל מפתחי Frontend רוצה

מעצב Adobe Wanting זאנג יצר יישום אינטרנט מעניין ל יצירת סמלים CSS טהור. זה פשוט נקרא “סמל” וזה עשוי להיות אחד הכי מגניב גנרטורים עבור מפתחי Frontend.

פרויקט זה הוא לגמרי חופשי ו פתוח על גיתוב אז אתה חופשי להוריד בלגן עם כל הקודים.

סמלים אלה אין לך תלות ב- CSS או צריך תכונות דפדפן מיוחד. במבט ראשון, זה אולי נראה כמו סמלים בנויים על SVGs אבל הם בעצם רק divs.

באמצעות הקסם של CSS, אתה יכול לבנות סמלים קו מותאם אישית - - ל רכיבי ממשק משותף כגון תפריט המבורגר, סמל שלוש הנקודות או סמל ההדפסה (בין רבים אחרים).

אתה יכול לבחור בין סמלים קו דק - - או סמלים כהים. שניהם לנצל מאפייני CSS דומים ואתה יכול אפילו לראות מה הם על ידי לחיצה על כל סמל ברשימה. תראה א הזזה צדדית עם קוד HTML ו- CSS יחד עם הסמל מוגדל.

אם תסתכל לכיוון הפינה השמאלית העליונה של שדות הקוד שתראה סמל עותק קטן. לחץ על זה ל להעתיק את הקוד באופן אוטומטי ללוח שלך. אה, ואת סמל ההעתקה? בנוי גם עם קוד CSS טהור של Wenting.

ל לשנות את הצבע של כל סמל, רק למצוא את ה צבע נכס בכיתה סמל הראשי. מעדכן את זה צבע נכס תשנה גם את כל השאר.

מאז סמלים אלה די פשוט, הם כנראה לא יעבוד עבור כל אתר. אבל זה א חלופה מגניב לתמונות או גופנים סמל וזה לגמרי חופשי.

בדוק את דף הבית של סמל ל ראה דוגמאות נוספות ול להעתיק / לערוך את המקור. אתה יכול גם לבדוק כל סמל בנפרד ב CodePen אם אתה רוצה צעצוע עם המקור בדפדפן שלך.