Font-awesome svg rounded icon

[mhulse]

[ft-icon] {
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px;
    border: 2px solid rgba(0, 0, 0, .25);
    border-radius: 20px;
    box-shadow:
        inset 0 0 5px rgba(255, 255, 255, .5),
        0 0 5px rgba(0, 0, 0, .25);
}
[ft-icon=""] { background-image: url(../images/bug.svg); }
[ft-icon],
[ft-icon]:visited,
[ft-icon]:visited:hover,
[ft-icon]:focus,
[ft-icon]:focus:hover,
[ft-icon]:hover,
[ft-icon]:active {
    color: #fff;
    background-color: #00457b;
    text-decoration: none;
}
[ft-icon="user"] { background-image: url(../plugins/font-awesome/user.svg); }
[ft-icon="user"],
[ft-icon="user"]:visited,
[ft-icon="user"]:visited:hover,
[ft-icon="user"]:focus,
[ft-icon="user"]:focus:hover,
[ft-icon="user"]:hover,
[ft-icon="user"]:active { background-color: #eb7e36; }
[ft-icon="commenting"] { background-image: url(../plugins/font-awesome/commenting.svg); }
[ft-icon="commenting"],
[ft-icon="commenting"]:visited,
[ft-icon="commenting"]:visited:hover,
[ft-icon="commenting"]:focus,
[ft-icon="commenting"]:focus:hover,
[ft-icon="commenting"]:hover,
[ft-icon="commenting"]:active { background-color: #5cb85c; }
[ft-icon="book"] { background-image: url(../plugins/font-awesome/book.svg); }
[ft-icon="book"],
[ft-icon="book"]:visited,
[ft-icon="book"]:visited:hover,
[ft-icon="book"]:focus,
[ft-icon="book"]:focus:hover,
[ft-icon="book"]:hover,
[ft-icon="book"]:active { background-color: #9f5cb8; }
[ft-icon="star"] { background-image: url(../plugins/font-awesome/star.svg); }
[ft-icon="star"],
[ft-icon="star"]:visited,
[ft-icon="star"]:visited:hover,
[ft-icon="star"]:focus,
[ft-icon="star"]:focus:hover,
[ft-icon="star"]:hover,
[ft-icon="star"]:active { background-color: #d14242; }

<ul ft-legend="keys">
    <li ft-liner>
        <span ft-icon="user"></span>
        <span ft-liner="fill">Study Participant (that’s you)</span>
    </li>
    <li ft-liner>
        <span ft-icon="commenting"></span>
        <span ft-liner="fill">Discussed Colorectal Cancer</span>
    </li>
    <li ft-liner>
        <span ft-icon></span>
        <span ft-liner="fill">Colorectal Cancer Positive</span>
    </li>
    <li ft-liner>
        <span ft-icon="book"></span>
        <span ft-liner="fill">Health Informant</span>
    </li>
    <li ft-liner>
        <span ft-icon="star"></span>
        <span ft-liner="fill">Social Relative</span>
    </li>
</ul>