Bootstrap Tutorial - Change UL list icon








The following code shows how to change UL list icon.

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
  href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script type='text/javascript'
  src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<style type='text/css'>
ul.nav li a {<!--   ww w .j  a  v  a2 s  .c  om-->
  text-indent: -20px;
  padding-left: 35px;
}
</style>
</head>
<body>
  <br />
  <div class="span4 well">
    <ul class="nav nav-list">
      <li class="nav-header">Recent news</li>
      <li><a href=""><i class="icon icon-play"></i>This is a test.</a></li>
      <li class="divider"></li>
      <li><a href=""><i class="icon icon-play"></i> Do you shake
          your tea?</a></li>
      <li class="divider"></li>
      <li><a href=""><i class="icon icon-play"></i> New Delta Sky
          Club Opens at LaGuardia?s Terminal C</a></li>
      <li class="divider"></li>
      <li><a href=""><i class="icon icon-play"></i> Love is in the
          Air</a></li>
      <li class="divider"></li>
    </ul>
  </div>
</body>
</html>

Click to view the demo