Customize the Carousel navigation arrows in Bootstrap 3

Greetings everyone, I am currently utilizing Bootstrap's Carousel options and I am looking to change the appearance of the arrows as I find them unattractive.

My desired look for the arrows is as follows:

https://i.sstatic.net/Rz9Mb.png

However, I am facing some difficulties in achieving this. I have attempted to use CSS to create them, but I have only been able to display the box. So far, this is what I have:

HTML:

<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="lnr lnr-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="lnr lnr-chevron-right" aria-hidden="true"></span>
</a>

CSS:

.carousel-control.left, .carousel-control.right {
  background-image: none !important;
}

.carousel-control {
  font-size: 20px;
  text-shadow: none;
}

.carousel-control .lnr-chevron-left {
  position: absolute;
  color: white;
  background: #333333;
  top: 48%;
  left: 0;
  z-index: 5;
  display: inline-block;
  margin-top: -10px;
  float: left;
  padding: 15px;
}

.carousel-control .lnr-chevron-right {
  position: absolute;
  color: white;
  background: #333333;
  top: 48%;
  right: 0;
  z-index: 5;
  display: inline-block;
  margin-top: -10px;
  float: right;
  padding: 15px;
}

I have been referencing this example from a website but have been unable to replicate it: Link here

Any assistance in achieving the desired arrow look would be greatly appreciated.

Thank you

Answer №1

Upon reviewing the contents of the linear-icons.css file, I came across the following:

@font-face {
font-family: 'Linearicons-Free';
src:url('../fonts/Linearicons-Free.eot?w118d');
src:url('../fonts/Linearicons-Free.eot?#iefixw118d') format('embedded-opentype'),
url('../fonts/Linearicons-Free.woff2?w118d') format('woff2'),
url('../fonts/Linearicons-Free.woff?w118d') format('woff'),
url('../fonts/Linearicons-Free.ttf?w118d') format('truetype'),
url('../fonts/Linearicons-Free.svg?w118d#Linearicons-Free') format('svg');
font-weight: normal;
font-style: normal;
}

.lnr {
font-family: 'Linearicons-Free';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

Make sure to have the font files for the .lnr class, as it requires a font provided by them.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to follow the placement of elements within the treeview component

I have successfully implemented a method to track the positions of Div elements on my webpage. However, I am facing an issue with keeping track of the position of a div within a modal popup extender that contains a TreeView. The position is always reset to ...

Automatically populating form fields with Selenium (less-than-stellar HTML present)

My current task involves: Entering my email Clicking submit If the message "check again later" is displayed, repeat until the message changes to "you are in!" Here's the code snippet I have written so far: PATH = "D:\Program Files (x86)&bs ...

Is there a way to stop my <pre> code from being displayed on the page?

Currently, I am utilizing the google code prettifier found at http://code.google.com/p/google-code-prettify/ This tool functions similarly to stack overflow by enhancing and highlighting syntax when a block of code is input. However, I have encountered a ...

Buttons containing two lines of text appear bigger compared to those with only one line of text, but it is essential for all buttons to be consistent in size with the single line buttons

I am facing an issue with the buttons on my website, as they seem to resize based on the amount of text present. When there are 2 lines of text, the buttons appear larger compared to those with just one line. How can I rectify this situation? Although thi ...

JavaScript: table is not defined

When creating a table using Django models and JavaScript, I encountered an issue where the cells values of the table could not be accessed from another JavaScript function. The error message indicated that the table was "undefined". Below is the HTML code ...

Ways to trigger javascript following each ajax or complete request

I have a jQuery function that attaches a click event to specific elements, as shown below. $(".alert-message .close").click(function(e) { $(this).parent().fadeTo(200, 0, function() { $(this).slideUp(300); }); e.preventDefault(); }) ...

Using jQuery and HTML to create numerous links that direct to a solitary iframe

I created a basic overlay setup using css, html, and jQuery. Here's how it looks: <a class="activator" id="activator" style="" href="#">hello</a> <div class="overlay" id="overlay" style="display:none;"></div> <div style="d ...

Create a responsive layout of inline-block elements that adjusts to resizing

I am currently focusing on developing the website found at: The progress so far includes successfully creating a list of div.project-item elements that adjust the number of columns based on window resizing due to the use of inline-blocks. My next goal is ...

Using "bottom: 0" does not function properly in Firefox when using fixed positioning

I'm working on a basic webpage that includes a textarea element which I want to expand to fill the entire screen, leaving a small gap at the top. Everything looks great in Chrome, but in Firefox, the textarea doesn't stretch all the way to the bo ...

Using JavaScript to display a live data table on a website sourced from Firebase

I am trying to generate a table with data from Google Firebase in JavaScript, but for some reason the table is not being displayed. Below is the code I am using: <a href="#usertable" onclick="openLink(event,'usertable');tab1();" class="tabl ...

What is the best method to add an overlay div onto another div when hovered, with a grid-style layout?

I attempted to create a grid-like design where each div would display an overlay on hover. The overlay div includes two buttons that should be centered. Although I believe the logic of my code is correct, the position of the buttons and overlay is not ce ...

Ways to align and fix a button within a specific div element

How can I make the button with position: fixed property only visible inside the second div and not remain fixed when scrolling to the first or last div? .one{ height:600px; width: 100%; background-color: re ...

Adjust the width of the TinyMCE Editor to automatically resize based on the content being

Is it possible for TinyMCE to adjust the content within an absolutely positioned container and update the width while editing? <div class="container"> <textarea>This is my very long text that should not break. This is my very long text tha ...

Interactive div with dynamically generated click event

I need to add an onclick event to a button that is being generated dynamically via ajax. How can I achieve this? This is the code responsible for generating the content. When we click on an item, I want a popup window to appear. function retrieveTableDat ...

customizable path settings for sprites using css

Currently, I have a situation where I am using many sprites in my CSS file, and all the image locations are hardcoded within the CSS itself. Now, I am considering moving all these images to a CDN. The problem is that it's quite cumbersome to change th ...

The element's height appears to be fluctuating unexpectedly when I attempt to adjust it using percentage values within a narrow range

I'm utilizing React and Bootstrap in this project. Here's an overview of my code: I have an element with height set to 0, in rem. My goal is to make the height of this element increase as I scroll down the page, creating the illusion that it is ...

Tips for managing the width of tr:nth-child(odd)

I am in search of a way to style my datasheets using tr:nth-child(odd). Below is the code snippet I am currently using: My main concern lies in adjusting the width. I aim for it to occupy a space that measures 200px by 400px The depth does not pose an is ...

When it comes to HTML5 drag and drop functionality, only the dragstart event is triggered

I have successfully implemented HTML5 drag&drop using jQuery UI, but now I want to switch to using pure HTML5 API. Currently, only the dragstart event is firing for me. I am not able to catch the rest of the events. However, everything seems to be fun ...

Achieve perfect vertical alignment for a set of three identical boxes using CSS media queries

Bootstrap is being used and the goal is to align three boxes of the same height vertically. https://i.stack.imgur.com/8xg0g.png Currently, the three blocks are not of equal height and do not occupy maximum space. Some manual padding has been added to addr ...

Implementing various style guidelines for distinct elements

Currently, I am struggling with organizing my unordered list elements to be stacked side by side. The style rule I have been using is as follows: #slide ul,li{ float:left; list-style-type:none; } Now, I am attempting to introduce another unordered list t ...