HTML CSS examples for CSS Widget:Font awesome
Font-Awesome overlap icons
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> i {<!--from w ww. j ava 2 s . c o m--> display:block; position:relative; height:3em; width:3em; padding-left:3em; } .icon-star-empty { background:url('https://www.java2s.com/style/demo/Google-Chrome.png') top left no-repeat; } .icon-star-full { background:url('https://www.java2s.com/style/demo/Google-Chrome.png') top left no-repeat; } .icon-star-half { background:url('https://www.java2s.com/style/demo/Google-Chrome.png') top left no-repeat; } .both-halfs { background:url('https://www.java2s.com/style/demo/Google-Chrome.png') top left no-repeat, url('https://www.java2s.com/style/demo/Google-Chrome.png') top left no-repeat; } </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetu</p> <i class="icon-star-empty icon-large"> <i class="icon-star-empty icon-large"> <i class="icon-star-empty icon-large"> <i class="icon-star-empty icon-large"> <i class="icon-star-empty icon-large"></i> </i> </i> </i> </i> <i class="icon-star-full icon-large"> <i class="icon-star-full icon-large"> <i class="icon-star-half icon-large"> <i class="icon-star-empty icon-large"> <i class="icon-star-empty icon-large"></i> </i> </i> </i> </i> <p>Lorem ipsum dolor sit amet, consectetur ad</p> <i class="both-halfs icon-large"> <i class="both-halfs icon-large"> <i class="icon-star-half icon-large"> <i class="icon-star-empty icon-large"> <i class="icon-star-empty icon-large"></i> </i> </i> </i> </i> </body> </html>