last.k1ng.k1xu last.k1ng.k1xu - 1 month ago 11
CSS Question

Placement issue Right and left arrow on below slider using font-awesome

I want to make something like this image:

http://i.imgur.com/uyJDvDK.png

I can't put these arrows (fa-angle-left) on image as it is on slider. I tried with

position: absolute
and
relative
.

This is my code, the arrows may not work because I used font-awesome.



#top_header {
background-image: url(http://i.imgur.com/wCDfIxa.png);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
.slider_wrapper {
width: 100%;
background-color: red;
overflow: hidden;
img {
width: 100%;
border: 0;
padding: 4em 0;
}
a {
.fa-angle-left, .fa-angle-right {
font-size: 80px;
color: yellow;
}
.fa-angle-left {
float: left;
}
.fa-angle-right {
float: right;
}
}
}
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<section id="top_header" class="clearfix">
<div class="wrapper">
<div class="slider_wrapper">
<img src="http://i.imgur.com/bPbklqm.png" alt="">
<a href="#"><span class="fa fa-angle-left"></span></a>
<a href="#"><span class="fa fa-angle-right"></span></a>
</div>
</div>
</section>




Answer

* {
  box-sizing: border-box;
}

html,
body {
  font-family: 'Open Sans', sans-serif;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.wrapper {
  max-width: 90%;
  margin: 0 auto;
}


/**  - - - - - - - - - - Top Header - - - - - - - - - - **/

#top_header {
  background-image: url(http://i.imgur.com/wCDfIxa.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}

.slider_wrapper {
  max-width: 100%;
  overflow: hidden;
}

img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
  border: 0;
  padding-bottom: 2em;
}

.fa-angle-left,.fa-angle-right {
  font-size: 40px !important;/*Dont use !important when you working on  different style sheet */
  color: white;
  position:absolute;
   margin-top:22.5%;
}

.fa-angle-left {
left:7%;
}

.fa-angle-right {
  right:7%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
 <section id="top_header" class="clearfix">

  <div class="wrapper">
    <div class="slider_wrapper">
      <a href="#"><span class="fa fa-angle-left "></span></a>
      <a href="#"><span class="fa fa-angle-right"></span></a>
      <img src="http://i.imgur.com/bPbklqm.png" alt="">
    </div>
    <!--slider_wrapper End-->

  </div>
</section>

    <!--slider_wrapper End-->

  </div>
</section>