Using Font Awesome icon for bullet points, with a single list item element - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:UL Element

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. UL Element

Description

Using Font Awesome icon for bullet points, with a single list item element

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ip</title> 
  <style>
@import url('https://fonts.googleapis.com/css?family=Montserrat');
body {<!--   w w w  .  j  a  va  2s. c  o m-->
   font-family:'Montserrat', sans-serif;
   background:Chartreuse;
   background:-moz-radial-gradient(center, ellipse cover, yellow 0%, rgba(39,41,47,2) 99%, rgba(39,41,47,2) 100%);
   background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, blue), color-stop(99%, rgba(39,41,47,2)), color-stop(100%, rgba(39,41,47,2)));
   background:-webkit-radial-gradient(center, ellipse cover, pink 0%, rgba(39,41,47,2) 99%, rgba(39,41,47,2) 100%);
   background:-o-radial-gradient(center, ellipse cover, OrangeRed 0%, rgba(39,41,47,2) 99%, rgba(39,41,47,2) 100%);
   background:-ms-radial-gradient(center, ellipse cover, grey 0%, rgba(39,41,47,2) 99%, rgba(39,41,47,2) 100%);
   background:radial-gradient(ellipse at center, BlueViolet 0%, rgba(39,41,47,2) 99%, rgba(39,41,47,2) 100%);
   filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='Chartreuse', endColorstr='yellow', GradientType=2 );
}

h2 {
   text-align:center;
   margin-bottom:51px;
}

.box {
   width:401px;
   background:blue;
   padding:51px 91px 91px;
   margin:51px auto;
   box-shadow:0px 0px 21px pink;
   border-radius:9px;
}

ul {
   list-style-type:none;
   padding-left:21px;
   color:OrangeRed;
}

li {
   position:relative;
   padding:21px 81px;
   margin:21px;
   clear:both;
}

li i {
   font-size:41px;
   float:left
}

li div {
   padding:11px 21px;
   float:left;
}
</style> 
 </head> 
 <body translate="no"> 
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" > 
  <div class="box"> 
   <h2>Lorem ipsum dolor sit amet</h2> 
   <ul> 
    <li> <i class="fab fa-cc-paypal"></i> 
     <div>
       Lorem ip 
     </div> </li> 
    <li> <i class="fab fa-cc-apple-pay"></i> 
     <div>
       Lorem ipsum 
     </div> </li> 
    <li> <i class="fab fa-cc-stripe"></i> 
     <div>
       Lorem ip 
     </div> </li> 
    <li> <i class="fab fa-cc-visa"></i> 
     <div>
       Lorem 
     </div> </li> 
   </ul> 
  </div>  
 </body>
</html>

Related Tutorials