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

Question

How can I fix this ?

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;
}

<div class="row mobile-next-prev">
<div class="col-sm-12">

 <!-- pre start -->
   <a href="http://127.0.0.1/fix/details/1201" class="set-button-left">‹</a>
   <!-- pre end -->
 
 <!-- next start -->
   <a href="http://127.0.0.1/fix/details/1210" class="set-button-right">›</a>
 <!-- next end -->
  </div>

</div>

Are you trying to remove the padding around the arrow in the photo, so you basically just have the arrow? Please provide more info on what you're trying to do. — HumanHickory, Dec 05 '19 at 19:48
It's unclear how to solve the issue you're having. An answer will depend on the following: - Is the arrow image in an `` tag? - Is the arrow image a background image? If you can provide a bit more information and/or a working code example, someone will be able to help you out. — Seth Corker, Dec 05 '19 at 19:52
@JDEV, are you trying to replace the arrow in your Carousel, or are you trying to use the arrow somewhere else that is not in the carousel (i.e. you're just looking for a pretty arrow to use)? — HumanHickory, Dec 05 '19 at 20:01
Make sure you are using font awesome, then i will provide some css to fix it — Gamers Agenda, Dec 05 '19 at 20:02
@JDEV just for clarification, Gamers Agenda gave you font awesome code. There are other options on FontAwesome and if you use the icon and it doesn't show you, read through the documentation: https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use — HumanHickory, Dec 05 '19 at 20:03
@HumanHickory please check the screenshot, i want to remove the transparent thing — JDEV, Dec 05 '19 at 20:06
@JDEV ok so I would just use font awesome, as Gamers Agenda mentioned, because it has a transparent background and won't come with any pre-programmed padding. however, sometimes elements can get bigger if neighbor elements are bigger, so we'd need more/all of your html to know for sure. But using fontawesome should 1) remove the 'background' (i.e. it is transparent) and 2) not have any top padding. — HumanHickory, Dec 05 '19 at 20:12
@HumanHickory i updated the question, please check, and tell me where i put the codes, because i think set-button-right is the responsible of that transparent and if i remove that class, the position missed up, i'm not an expereinced web developer, i'm trying to fix some bug of some freelancers worked on a website — JDEV, Dec 05 '19 at 20:16
@JDEV, is the website up online? If so, can you send the Url? — HumanHickory, Dec 05 '19 at 20:23
@JDEV, sorry i was not here to read your answers. I am here Now. What you exactly want from arrow? Do you want the arrow in the middle of visible background? — Gamers Agenda, Dec 05 '19 at 20:30

score 1 · Accepted Answer · answered Dec 05 '19 at 20:32

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

Thank you, that helped me to figure it out, appreciate your help ! — JDEV, Dec 06 '19 at 00:46

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

1 Answers1

Linked