search

mhulse / css-issues

Practical CSS code snippets and examples.
11 stars 1 forks source link

Font Awesome 5 custom list icons using :before pseudo-element #212

Open mhulse opened 5 years ago

mhulse commented 5 years ago 
.ap_list-checker,
.ap_list-checker li {
  margin: 0;
  padding: 0;
}
.ap_list-checker ul {
    font-size: 1.4rem;
    margin: 1rem 0;
}
.ap_list-checker li {
    list-style: none;
    padding-left: 2.5rem;
    margin-left: 1rem;
    position: relative;
}
.ap_list-checker li::before {
    color: #91ca42;
    -webkit-font-smoothing: antialiased;
    content: "\f00c";
    font-family: "Font Awesome 5 Pro";
    font-size: 1.6rem;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    line-height: 1;
    position: absolute;
    left: 0;
    top: 0;
    text-decoration: inherit;
    text-rendering: auto;
}
.ap_list-checker li + li {
    margin-top: 0.75rem;
}

Example: