css - How to reduce the size of the background of an image or remove it

Question

How can I fix this ?

check the screenshot

I want only the arrow or that transparent. Is that possible?

I searched for the image and I can't find it

.set-button-left {
    color: #7396ff;
    position: fixed;
    top: 40%;
    left: 10px;
    font-size: 77px;
    z-index: +999;
}

Answer 1

To Implement FontAwesome, you will need to reference it on your page. This can be wherever you have refrenced other stylesheets (i.e. the header). In this example, I have used an online host (CDNJS) to provide the url. You can just copy and paste it. Otherwise, you can go to fontawesome's website and sign up and read through the documentation to find out the other numerous ways to use it.

After that, you just stick the font awesome icons in there, as shown. You can style them through inline styling (shown in the second example) or you can use CSS.

This can go anywhere in your html. However, depending on neighbor elements, it might not work as expected, hence why I was asking for more HTML. But this should, at minimum, get you started.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />

<i class="fas fa-chevron-left"></i>
<i class="fas fa-chevron-right"></i>

<br>
<br>

<i class="fas fa-chevron-left" style="color: blue; font-size: 30px"></i>
<i class="fas fa-chevron-right"style="color: blue; font-size: 30px"></i>

CodePen: https://codepen.io/humanhickory/pen/Powqydj