<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
<section class="container-fluid sec-download">
<div class="container">
<div class="row">
<div class="col">
<h3>مهمترین دانلود ها</h3>
</div><!--.col-->
</div><!--.row-->
<div class="row">
<div class="col-md-3">
<ul class="nav nav-pills flex-column">
<li class="nav-item w-100">
<a class="nav-link active ">
<span class="d-inline-block">فیلم</span> <i class="fab fa-youtube float-left"></i>
</a>
</li>
<li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li>
<li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li>
<li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li>
<li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li>
</ul>
</div><!--.col-->
<div class="col-md-3">
<ul class="nav nav-pills flex-column">
<li class="nav-item w-100">
<a class="nav-link active ">
<span class="d-inline-block">متن</span> <i class="fas fa-file-alt float-left"></i>
</a>
</li>
<li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li>
<li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li>
<li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li>
<li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li>
</ul>
</div><!--.col-->
<div class="col-md-3">
<ul class="nav nav-pills flex-column">
<li class="nav-item w-100">
<a class="nav-link active ">
<span class="d-inline-block">صوت</span> <i class="fas fa-music float-left"></i>
</a>
</li>
<li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li>
<li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li>
<li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li>
<li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li>
</ul>
</div><!--.col-->
<div class="col-md-3">
<ul class="nav nav-pills flex-column">
<li class="nav-item w-100">
<a class="nav-link active ">
<span class="d-inline-block">عکس</span> <i class="far fa-image float-left"></i>
</a>
</li>
<li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li>
<li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li>
<li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li>
<li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li>
</ul>
</div><!--.col-->
</div>
</div>
</section>
.sec-download{
background: #fafafa;
direction: rtl;
text-align: right;
color: #000;
padding-top: 2.5rem;
padding-bottom: 2rem;
}
.sec-download h3{
margin-bottom: 2rem;
}
.sec-download li a.active {
background-color: #f57921 !important;
margin-bottom: 0.5rem;
}
.sec-download li a.active:hover {
color: #fff !important;
}
.sec-download li a.active i{
font-size: 1.5rem;
}
.sec-download li a{
font-family:iranyekan_light;
color: #000000;
padding-right: 1rem;
}
.sec-download li i{
font-size: 0.3rem;
}