HTML CSS examples for CSS Widget:Font awesome
Font Awesome stacking icons
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- www.j av a 2 s .com--> background:Chartreuse; } .checkStuff { margin-bottom:21px; } .fa-stack { background:yellow; border-radius:51%; cursor:pointer; } input[type="checkbox"]:checked + label .fa-check-circle { display:block; color:blue; text-align:center; } .fa-circle-thin { color:pink; } </style> </head> <body> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <h3>Lorem ipsum dolor sit amet, consectetur</h3> <input type="checkbox" class="checkStuff"> <label> <span class="fa-stack"> <i class="fa fa-circle-thin fa-stack-2x"></i> </span>Lorem ipsum</label> <br> <input type="checkbox" class="checkStuff" checked> <label> <span class="fa-stack"> <i class="fa fa-check-circle fa-stack-2x"></i> </span>Lorem ips</label> </body> </html>