Replace Font Awesome icon with a background image

Looking to replace a Font Awesome icon with a background image using only CSS.

Current Setup: https://i.sstatic.net/tkPXz.jpg

.btn.btn-default.bootstrap-touchspin-up:before {
    font-family: Fontawesome;
    content: "\f067";
    font-size: 14px;
}

Desired Outcome:https://i.sstatic.net/wP5wb.jpg

.btn.btn-default.bootstrap-touchspin-up:before {
    background-image : url(Images/arrows-left-right.png);
    font-family: initial;
    content: "";
    font-size: 14px;
    height: 20px;
    width: 20px;
}
htmlcssfont-awesome

Answer №1

Ensure you include these extra attributes

  width: 20px;
  height: 20px;
  display: inline-block; 
  background-position: center;
  background-size: contain;

Per the suggestion from @Alexis Delgado, using inline-block is a superior option for maintaining inline alignment.

Answer №2

Give this a shot

HTML:

    <span class="btn btn-default"></span>

CSS:

.btn:before {
  font-family: Fontawesome;
  content: "\f067";
  font-size: 14px;
}

.btn {
  border-radius: 50%;
  border: 2px solid black;
}

Example :http://jsfiddle.net/GCu2D/5181/

Answer №3

display:flex;

This is the key to achieving the desired result. By using flex instead of inline-block, you can ensure that :before and :after elements maintain their dimensions without collapsing.

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

Setting the height of the text area in a three-column layout cannot be achieved using a percentage value

I'm working on creating a 3-column layout with two text areas. The issue I'm facing is that when I adjust the width of the text areas to create columns, the height shrinks. I need a solution that will be compatible with HTML5 browsers - support f ...

csshtmllayout

Struggling to modify the page width using CSS and HTML on Wordpress, facing unexpected limitations

I've exhausted all my options. I've attempted to add a certain % page width globally using CSS in the editor, page template, and customizer but it's just not working. It's frustrating because I'm using the Twenty Twenty Two theme, ...

csswordpress

Modifying the disabled attribute of an input tag upon button click in Angular 2

I am currently working on a function in Angular 2 where I want to toggle the disabled attribute of an input tag upon button click. Right now, I can disable it once but I am looking to make it switch back and forth dynamically. Below is the HTML template c ...

javascripthtmlangularangular2-template

unable to download file and missing image display

I need assistance with creating a download link using the anchor tag in my code. However, the link is not working as expected and the image is not displaying either. <td><img src="{{book.book_image}}" alt="{{book.name}}" width= ...

pythonhtmldjango

What is the method for displaying the delete icon, a child component located within the Menu Item, upon hovering over it using Material UI CSS syntax?

My goal is to display the delete icon when hovering over a specific menu item that is being mapped using the map function. The desired functionality is for the delete icon to appear on the corresponding menu item when it is hovered over. I attempted to i ...

javascriptcssreactjsreact-nativematerial-ui

Ways to Retrieve JavaScript Variable inside HTML Tags in a JSP

I am currently facing a requirement where I must assign js variables to html input tag ids. For example: <input type='text' id='(here I need js variable)'/> I am aware that one way to achieve this is by creating the entire elem ...

javascripthtmljsp

Enhance a disabled button by incorporating a ripple effect

I've got a button that toggles on and off depending on the required form fields. When it's enabled, clicking it activates a ripple effect. Now I'd like to have the ripple effect even when the button is disabled. I attempted something simila ...

cssvue.jsvuejs3vue-composition-apiquasar-framework

Having trouble with Javascript/jQuery not functioning in IE8?

My current project involves a website that functions smoothly in Chrome, but encounters issues with running JavaScript/jQuery scripts in IE8. Even a simple alert on page load fails to execute. Admittedly, my approach is a bit messy as I have mixed CSS an ...

phpjavascriptjqueryhtmlcss

Rotate background image upon each visit

I have a collection of around 50 background images that I want to display randomly each time a user visits my website. The idea is to provide a unique background image for every visit, without saving any information about which image was previously display ...

c#javascriptjqueryasp.netcss

Turning a string retrieved from the element's data attribute into a JSON format

I am running into an issue with the code snippet below. It seems that $.parseJSON() is having trouble with single and double quotes. I'm stuck on finding a solution to this problem. Any help would be greatly appreciated! <div data-x='{"a":"1" ...

javascriptjqueryhtmljson

Retrieve the current height of the iFrame and then set that height to the parent div

Within a div, I have an iFrame that needs to have an absolute position for some reason. The issue is that when the iFrame's position is set to absolute, its content overlaps with the content below it. Is there a way to automatically adjust the height ...

javascriptjqueryhtmlcssiframe

Using CSS animations to animate a div while creating a subtle pause between the two

I am working on creating a notification bar that will be displayed and hidden using CSS animation. My challenge is finding the right delay between the two animations. HTML <div id="notification" class="alert" role="alert"></div> JS $(' ...

jqueryhtmlcssanimation

Establishing a secondary setTimeout function does not trigger the execution of JQUERY and AJAX

// Custom Cart Code for Database Quantity Update $('.input-text').on('keydown ' , function(){ var tr_parent = $(this).closest("tr"); setTimeout(function () { $(tr_parent).css('opacity', '0.3'); }, 4000); var i ...

javascriptjquerycssajax

Detecting whether a browser is capable of supporting dark mode

One method to determine if dark mode is active is by using prefers-color-scheme: dark: const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; Is there a way to detect if a browser supports dark mode as well? (By "supports ...

javascriptcssbrowserdarkmode

Polymer event / callback for appending new child nodes

My current project involves creating a custom element, let's call it <parent-element>, that performs specific actions based on the presence of its childNodes. When I define the element like this: <parent-element> <div> </div&g ...

javascripthtmlpolymerweb-componentmutation-observers

Having trouble with the width:auto attribute in IE7?

CSS #wrapper .tn{ width:auto; height:20px; line-height:20px; float:left; padding:5px 2px 5px 5px; margin:0 5px 10px; font-weight:bold; background:#f0f0f0; } HTML <div id="wrapper"> ...

htmlcssinternet-explorerwidthinternet-explorer-7

Utilizing jQuery to accentuate a specific div element when it is positioned directly in the center of the browser window

I have multiple divs with id="scroll_1", "scroll_2", "scroll_3", and so on. I am trying to implement a feature where when any of these divs is in the center of the window, I want to change the background color using jQuery highlight. Currently, I am able t ...

jqueryhtmlcss

Aligning a Material UI button to the far right of a row

I am struggling to align a React material-ui button to the right-most of the page and despite trying to use the justify="flex-end" attribute within the following code, it doesn't seem to be working: <Grid item justify="flex-end" ...

cssreactjsmaterial-ui

Blurring the background creates an "inset shadow" problem when transitioning

Problem: Strangely, when using Backdrop-filter: blur(Xpx); during a transition as shown below, unexpected "inset Shadows" mysteriously appear until the end of the transition. https://i.stack.imgur.com/uij7F.gif Illustration of the Issue Using jsfiddle Sp ...

htmlcssbluronblur

Incorporating CSS styles into a dynamic JavaScript computation

I'm attempting to apply inline CSS to a JS calculation (e.g. 3*2*1) in order to make it appear red. I have experimented with using a span tag, but it only displays the calculation and not the result. I also tried utilizing an internal style sheet. Ho ...

javascriptcss