שאלה מצויינת :)
אפשר להוסיף אייקון SVG לכפתור וידג’ט הנעה לפעולה, על ידי הזרקה בקוד CSS.
השלבים להוספת אייקון SVG לכפתור בוידג’ט הנעה לפעולה של אלמנטור
- העלי את האייקון למדיה של האתר.
- הדביקי את הקוד הבא בCSS מותאם של וידג’ט הנעה לפעולה:
selector .elementor-cta__button-wrapper{
display: flex !important;
}
selector .elementor-cta__button{
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
selector .elementor-cta__button:before{
content: url('https://chagitcourses.ussl.co.il/wp-content/uploads/img2.svg') !important;
}
- החליפי את כתובת התמונה המופיעה בקוד, בכתובת המדוייקת של האייקון שהעלית לאתר.
- את המרווח בין האייקון לטקסט את יכולה לשנות על ידי שינוי הפיקסלים בהגדרה של gap.
- טיפ: אם את רוצה שהאייקון יופיע אחרי הטקסט, החליפי בקוד את before לafter.
זו הדרך הקלה להוספת אייקון SVG לוידג’ט הנעה לפעולה. החסרון שלה הוא שאי אפשר לשלוט בגודל של האייקון.
כדי להזריק את האייקון בקוד + לשלוט על הגודל שלו, יש להשתמש בהטמעת אלמנט פסאודו כתמונת רקע.
במסלול אליפות בCSS תקבלי הדרכה מדוייקת וברורה איך להטמיע אייקון SVG כתמונת רקע, ולשלוט על הגודל שלו.
תצליחי,
חגית
8 תגובות
איזו מהירות!
תודה!
עובד לי מעולה, אליפות ממש!!
בכיף ובשמחה :)
תצליחי המון,
חגית
היי לא הבנתי מה זה כתובת האייקון? איך אני יודעת מה כתובת האייקון שלי?
שלום דניאל
בלוח הבקרה > מדיה > תעלי את האייקון הרצוי > אחרי שהקובץ עולה אפשר להעתיק את הכתובת שלו בכפתור “העתק קישור ללוח”
(לכל קובץ בספרית המדיה יש כתובת משלו. אפשר לעבור על כל תמונת קובץ בספרית המדיה, ולהעתיק את הכתובת בלחיצה על “העתק כתובת”).
את הקישור הנ”ל תדביקי בקוד הרצוי.
תצליחי המון,
חגית
עשיתי את זה אבל חוץ מזה שהכפתור שלי שינה מקום לא קרה כלום, האייקון לא התווסף
רוצה להדביק פה את הקוד שכתבת?
selector .elementor-cta__button-wrapper{ display: flex !important; } selector .elementor-cta__button{ display: flex !important; align-items: center !important; gap: 8px !important; } selector .elementor-cta__button:after{ content: url(https://avivphysio.com/wp-content/uploads/2023/11/whatsapp_160200.svg) !important; }חסר לך מרכאות מסביב לכתובת של התמונה, הקוד הזה אמור לעבוד:
selector .elementor-cta__button-wrapper{ display: flex !important; } selector .elementor-cta__button{ display: flex !important; align-items: center !important; gap: 8px !important; } selector .elementor-cta__button:after{ content: url('https://avivphysio.com/wp-content/uploads/2023/11/whatsapp_160200.svg') !important; }