Generated by SassMeister.com.
<ul class="list-bullet-icon">
<li class="lolo iconfont-A">a</li>
<li>b</li>
</ul>
.list-bullet-icon [class^="iconfont-"], .list-bullet-icon [class*="iconfont-"] {
position: relative;
}
.list-bullet-icon .iconfont-16px {
padding-left: 26px;
}
.list-bullet-icon .iconfont-18px {
padding-left: 28px;
}
.list-bullet-icon .iconfont-22px {
padding-left: 32px;
}
.list-bullet-icon .iconfont-30px {
padding-left: 40px;
}
.list-bullet-icon .iconfont-100px {
padding-left: 110px;
}
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
$iconfont-size: (16, 18, 22, 30, 100);
.list-bullet-icon {
& [class^="iconfont-"],
& [class*="iconfont-"] {
position: relative;
}
@each $val in $iconfont-size {
& .iconfont-#{$val}px {
padding-left: #{$val + 10}px;
}
}
}
<ul class="list-bullet-icon">
<li class="lolo iconfont-A">a</li>
<li>b</li>
</ul>