הוספת אייקון לכפתור בוידג'ט הנעה לפעולה של אלמנטור

השלבים להוספת אייקון 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 תגובות

מרים ב הגיב:

18/01/2023 בשעה 23:37

איזו מהירות!
תודה!
עובד לי מעולה, אליפות ממש!!

התחבר למערכת כדי להשתתף בדיון
1. חגית קרמר הגיב:
  
  18/01/2023 בשעה 23:37
  
  בכיף ובשמחה :)
  
  תצליחי המון,
  חגית
  
  התחבר למערכת כדי להשתתף בדיון
דניאל לוי הגיב:

26/11/2023 בשעה 11:27

היי לא הבנתי מה זה כתובת האייקון? איך אני יודעת מה כתובת האייקון שלי?

התחבר למערכת כדי להשתתף בדיון
1. חגית קרמר הגיב:
  
  26/11/2023 בשעה 20:10
  
  שלום דניאל
  
  בלוח הבקרה > מדיה > תעלי את האייקון הרצוי > אחרי שהקובץ עולה אפשר להעתיק את הכתובת שלו בכפתור “העתק קישור ללוח”
  (לכל קובץ בספרית המדיה יש כתובת משלו. אפשר לעבור על כל תמונת קובץ בספרית המדיה, ולהעתיק את הכתובת בלחיצה על “העתק כתובת”).
  
  את הקישור הנ”ל תדביקי בקוד הרצוי.
  
  תצליחי המון,
  חגית
  
  התחבר למערכת כדי להשתתף בדיון
  1. דניאל הגיב:
    
    26/11/2023 בשעה 20:13
    
    עשיתי את זה אבל חוץ מזה שהכפתור שלי שינה מקום לא קרה כלום, האייקון לא התווסף
    
    התחבר למערכת כדי להשתתף בדיון
    1. חגית קרמר הגיב:
      
      26/11/2023 בשעה 20:17
      
      רוצה להדביק פה את הקוד שכתבת?
      
      התחבר למערכת כדי להשתתף בדיון
      1. דניאל הגיב:
        
        26/11/2023 בשעה 20:21
        
        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; }
        
        התחבר למערכת כדי להשתתף בדיון
        
        חגית קרמר הגיב:
        
        26/11/2023 בשעה 23:31
        
        חסר לך מרכאות מסביב לכתובת של התמונה, הקוד הזה אמור לעבוד:
        
        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; }
        
        התחבר למערכת כדי להשתתף בדיון

כתיבת תגובה לבטל

יש להתחבר למערכת כדי לכתוב תגובה.