can I move text position in bootstrap icon

Ray Kim 0
Viewed 19

I want to move the position of text from the right side of the arrow to the left like the image below

enter image description here

But I can't find a way how

Would there be any way to do it?

this is html code

   <div class="trending">    
    <div class="divider"><h2>trending</h2></div>
    <div class="list-wrapper">
      <div id="movieListTrending" class="movie-list"></div>
      <div class="chevrons">
        <div class="left-chevron">
          <i id="leftChevron" onclick="handleClickLeftChevron()" class="bi bi-chevron-compact-left">Previous</i>
        </div>
        <div class="right-chevron">
          <i id="rightChevron" onclick="handleClickRightChevron()" class="bi bi-chevron-compact-right">Next</i>
        </div>
      </div>
    </div>
  </div>

and this is css i applied

.trending .chevrons {
  display: flex;
  flex-direction: row;
  border: solid 1px red;
  position: relative;
  margin: 0 auto 0 auto;
  width: 1000px;
}
.trending .chevrons div {
  display: flex;
  flex-direction: row;
  position: static;
  top: 320px;
}
.trending .chevrons .left-chevron {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding-left: 10%;
  /* left: 50px; */
  /* background-color: skyblue; */
}
.trending .chevrons .right-chevron {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding-right: 10%;
  /* background-color: rgb(255, 137, 137); */
}
.trending .chevrons div i {
  color: rgb(255, 255, 255, 0.7);
  font-size: 60px;
  cursor: pointer;
  z-index: 20;
}

.trending .chevrons div #leftChevron {
  /* background-color: blue; */
}

.trending .chevrons div #rightChevron {
  /* background-color: red; */
}

and i've got the bootstrap icon from here https://icons.getbootstrap.com/icons/chevron-compact-right/

bootstrap-4 css html
1 Answers

Basically need to move it before the >. Mainly had to set the font to 60px.

.trending .chevrons {
  display: flex;
  flex-direction: row;
  border: solid 1px red;
  position: relative;
  margin: 0 auto 0 auto;
  width: 1000px;
  color: rgb(255, 255, 255, 0.7);
  font-size: 60px;
}

.trending .chevrons div {
  display: flex;
  flex-direction: row;
  position: static;
  top: 320px;
}

.trending .chevrons .left-chevron {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding-left: 10%;
  /* left: 50px; */
  /* background-color: skyblue; */
}

.trending .chevrons .right-chevron {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding-right: 10%;
  /* background-color: rgb(255, 137, 137); */
  font-style: italic;
  cursor: pointer;
  z-index: 20;
}

.trending .chevrons div i {}

.trending .chevrons div #leftChevron {
  /* background-color: blue; */
}

.trending .chevrons div #rightChevron {
  /* background-color: red; */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">


<div class="trending">
  <div class="divider">
    <h2>trending</h2>
  </div>
  <div class="list-wrapper">
    <div id="movieListTrending" class="movie-list"></div>
    <div class="chevrons">
      <div class="left-chevron">
        <i id="leftChevron" onclick="handleClickLeftChevron()" class="bi bi-chevron-compact-left">Previous</i>
      </div>
      <div class="right-chevron">
        Next
        <i id="rightChevron" onclick="handleClickRightChevron()" class="bi bi-chevron-compact-right"></i>
      </div>
    </div>
  </div>
</div>

IT goldman0
Related