title: can I move text position in bootstrap icon
body: <p>I want to move the position of text from the right side of the arrow to the left like the image below</p>
  <p><a href="https://i.stack.imgur.com/cJ4DE.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>But I can't find a way how</p>
  <p>Would there be any way to do it?</p>
  <p>this is html code</p>
  <pre><code>   &lt;div class=&quot;trending&quot;&gt;    
      &lt;div class=&quot;divider&quot;&gt;&lt;h2&gt;trending&lt;/h2&gt;&lt;/div&gt;
      &lt;div class=&quot;list-wrapper&quot;&gt;
        &lt;div id=&quot;movieListTrending&quot; class=&quot;movie-list&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;chevrons&quot;&gt;
          &lt;div class=&quot;left-chevron&quot;&gt;
            &lt;i id=&quot;leftChevron&quot; onclick=&quot;handleClickLeftChevron()&quot; class=&quot;bi bi-chevron-compact-left&quot;&gt;Previous&lt;/i&gt;
          &lt;/div&gt;
          &lt;div class=&quot;right-chevron&quot;&gt;
            &lt;i id=&quot;rightChevron&quot; onclick=&quot;handleClickRightChevron()&quot; class=&quot;bi bi-chevron-compact-right&quot;&gt;Next&lt;/i&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p>and this is css i applied</p>
  <pre><code>.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; */
  }
  </code></pre>
  <p>and i've got the bootstrap icon from here
  <a href="https://icons.getbootstrap.com/icons/chevron-compact-right/" rel="nofollow noreferrer">https://icons.getbootstrap.com/icons/chevron-compact-right/</a></p>