Ul Li Convert into arraow in using html

<div class="exceldiv">

<h2>3. Joins </h2>

<ul>

<li>Joins</li>

<li>Inner Join</li>

<li>Left Join</li>

<li>Right join</li>

<li>Full join</li>

</ul>

</div>

<style type="text/css">

.exceldiv{ flaot:left; width:100%; height:auto;}

.exceldiv h2{ font-size:13px; margin:0px;}

.exceldiv ul{margin:0px; padding:0px; list-style:none;}

.exceldiv ul li {

    float: left;

    width: 100%;

    padding: 5px 40px;

    position: relative;

}

.exceldiv ul li:before {

    content: "\f18e";

    position: absolute;

    display: inline-block;

    font-family: FontAwesome;

    float: left;

    width: 100%;

    padding: 0px;

    left: 20px;

    color: #6c7cd0;

    top: 7px;

}

 </style>