כדי להוסיף אייקון לרשימה, האופציה הפשוטה היא שימוש באייקונים של Betheme (קישור כאן), ללחוץ על "Default". ניתן גם להשתמש בתמונה תפורה אישית – פירוט על זה בהמשך.
יש להוסיף לבלוק שבו מוגדרת הרשימה Class של "listicon1", ולהשתמש בקוד CSS הבא:
.listicon1 ul li:before{ font-family: "mfn-icons"; content: 'e8c2'; display: inline-block; height: 18px; padding-left:15px; } .listicon1 ul { list-style-type:none; }
או במקרה של רשימת קישורים (Links):
ul.blogroll li:before{ font-family: "mfn-icons"; content: 'e8c2'; display: inline-block; height: 18px; padding-left:15px; } ul.blogroll { list-style-type:none; }
פיצול ל-2 עמודות:
#Content .listicon1 li { list-style: none; width:50% !important; float:left; }
כאשר יש להחליף את ה-content לפי האייקון הנדרש (בעמוד האייקונים, לעשות inspect ולמצוא את ה-:before של אלמנט ה-i).
להוספת הסימן של הנקודה (•) ברשימה רגילה:
.adddot ul li:before{ content: '•'; display: inline-block; height: 18px; padding-right:5px; } .adddot ul { list-style-type:none; }
רשימה אופקית
כדי לייצר רשימה אופקית יש להשתמש בקוד CSS הבא:
.bullet1 ul li { display:inline; padding-right:34px; font-size:22px; }
שימוש בתמונה תפורה אישית
על מנת לשבץ תמונה כמיקרו-אלמנט ברשימה, יש להגדיר לבלוק שלה Class של "cicon" ולהשתמש בקוד CSS הבא:
(יש להעלות את התמונה באתר הלקוח ולעדכן את הכתובת, יישור של הטקסט לקו האייקונים – שורה שנייה וצמצום הרווחים – אופציונליים)
#Content .cicon1 ul { list-style: none; } #Content .cicon1 ul li:before{ content: ''; display: inline-block; margin-top:0px; background-size:auto 100%;; background-repeat:no-repeat; } #Content .cicon1 ul li{ position:relative; } #Content .cicon1 ul li:before{ position:absolute; } /*Custom Adjustments*/ /*List Spacing & Indent*/ #Content .cicon1 ul li{ margin-bottom:25px; } #Content .cicon1 ul { margin-left:15px; } /*Icon Size*/ #Content .cicon1 ul li:before { height: 32px; width: 32px; background-image: url('http://healthonline.aitech.co.il/wp-content/uploads/2020/11/ProArticle.png'); } /*Icon Position*/ #Content .cicon1 ul li:before{ right:-5px; top:-5px; } /*Text Position*/ #Content .cicon1 ul li{ padding-right:40px; }