שיבוץ תמונה (מיקרו-אלמנט) או אייקון ברשימה

כדי להוסיף אייקון לרשימה, האופציה הפשוטה היא שימוש באייקונים של 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;
}

ליישור קו של האייקונים:

#Content .listicon1 ul {
 margin-left:15px;
}
#Content .listicon1 ul li{
 padding-right:35px;
}
#Content .listicon1 ul li:before{
 right:10px;
 top:1px;
 position:absolute;
}
#Content .listicon1 ul li {
  position:relative;
}