Embed a personalized icon into a Bootstrap button

I need assistance with using a customized icon within a bootstrap button. This is the snippet of HTML code I am working with:

<button class="btn btn-info pull-right toggle" data-pausetext="Break In" 
 data-resumetext="Resume" ><i class="icon-play"></i> Clock In</button>

Here is the relevant CSS from my stylesheet:

.icon-play {
background-image: url(../img/Clock-Play.png) no-repeat;
background-position: center center;
}

Unfortunately, the icon does not appear inside the button as expected. Any help would be greatly appreciated. Thank you.

htmlcss

Answer №1

To start, the <i> element is missing a height and width property.
Just adding height and width won't achieve the desired result because <i> is an inline element. You need to include another property like display: inline-block. Lastly, for a perfect fit, don't forget to add background-size: cover (to adjust the icon precisely within its container).

.icon-play{
  background-image : url(../img/Clock-Play.png);
  background-size: cover;
  display: inline-block;
  height: 15px;
  width: 15px;
}

Answer №2

Consider adjusting the size of your icon element by adding padding to give it some dimensions.

You may also want to explore using the `cover` property instead of `no-repeat`. This will ensure that the background image stretches proportionately to cover the entirety of the element, adapting to any size element you place it in.

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

Include a class in your PHP code

After a user uploads a sound, it is displayed in a database table as a link. The link needs to contain the class "sm2_button". Unfortunately, when trying to implement this within a PHP file, a syntax error occurs. echo "<td><a href='http://w ...

phphtmlclasshyperlink

Move the Bootstrap button to the right side of the div, extending beyond its boundaries

My bootstrap page seems to be experiencing an issue where the buttons within a div are shifted slightly to the right without any clear reason: https://i.sstatic.net/3xlMC.png https://i.sstatic.net/yFLFM.png https://i.sstatic.net/gh686.png The div in qu ...

htmlcssbootstrap-4

Modify the Url.Content based on user interaction in HTML MVC

I have a gallery on my HTML page that displays images. I want to allow users to change the directory from which the photos are pulled based on their selection. My plan is to create a navigation bar with buttons representing each folder. When a user clicks ...

javascripthtmlasp.net-mvc

Display all elements on a webpage using Javascript without the need for scrolling

I'm looking for a way to ensure all items on a webpage load immediately, without having to scroll down multiple times before running a script to find a specific item. Is there a method to have all items load at once without the need to manually scroll ...

javascripthtmlcss

Achieving Vertical Centering in Bootstrap: A Step-by-Step Guide

Creating a mobile-optimized website using bootstrap 4. Currently struggling to vertically center an element within the available space. The element consists of a title with fixed size, a message, and 2 buttons in a div. Need to ensure it is vertically cent ...

htmlcssbootstrap-4

The jQuery menu is malfunctioning in Internet Explorer due to the Document Mode being set to Quirks

I am encountering an issue where the below code is not functioning properly in Internet Explorer's document mode quirks. Each time I hover over the submenu, its length doubles unexpectedly. Can someone please provide assistance with this matter? < ...

javascriptjquerycsskendo-ui

Is there a clash between ng-if and col col-50?

Currently, I am attempting to create a table using Angular code within HTML. The structure of the table is exactly how I want it to be, and here is the code snippet representing it: <div class="row"> <div class="col col-25">Date</div> ...

htmlcssangularjs

What is the method for fetching the value from checkbox buttons in Bootstrap 4?

I am currently utilizing Bootstrap's button plugin for my buttons, specifically with 6 checkbox buttons. I am in need of a method to extract the value of each checked button in order to perform some calculations. However, I am struggling to find a sol ...

javascriptjqueryhtmlbootstrap-4

Aligning two divs vertically within another div without relying on the display:flex property

My goal is to align the content of two divs to the top within a parent div. I am unable to use display: flexbox, and it needs to be implemented as inline CSS. Currently, the layout appears as intended when the description div has only one line. However, i ...

htmlcss

Transferring information from an HTML form to a C# webservice through AJAX

I've created a form in HTML using Bootstrap within PHPStorm, and now I want to send the information to a C# webservice using AJAX. However, I'm unsure about what to include in the AJAX URL section (shown below). Here is the HTML/Bootstrap form I ...

c#jqueryhtmlajaxweb-services

Some images are missing the navigation arrows

Clicking on the images here reveals 'next' and 'previous' arrows on each image, except the first two. What could be causing this issue? <nav class="prev-next"> <ul> <?php $next_post = get_next_post(); $pr ...

javascripthtmlcsswordpressgallery

Tips for changing the order of a child element within a parent element that is positioned above its own parent element

I have a unique setup with two parent elements, one black and one red. Each parent element contains its own child element - the black parent has a gray div child, while the red parent has a pink div child. There are some constraints to consider: I am no ...

htmlcss

Issues with the animation of the navbar menu button are preventing it from functioning

I have been attempting to incorporate animation when the navbar-button is toggled on smaller screen sizes. Inspired by the design of .navbar-toggle.larr in this particular template, I tried to implement a similar effect. /* ANIMATED LEFT ARROW */ .navbar- ...

jqueryhtmlcsstwitter-bootstrapanimation

Is it possible to dynamically adjust div height using on resize event?

In my current setup, I have two separate divs on the left and right sides. The issue arises when the height of the left div exceeds the height of the right div. In such cases, the function adjusts the heights to be equal and hides any excess text in the le ...

javascripthtmlcss

The color of the text changes based on its alignment

Utilizing style sheets and attribute selectors, create styles that will change the color of text displayed on the page based on its alignment (e.g. left-aligned text in blue, right-aligned text in green). Additionally, text within h2 tags should have color ...

htmlcss

Aligning items in the center using the flex property is limited to just one element

#draggable-container { margin: 0 auto; display: flex; flex-wrap: nowrap; align-items: center; } .draggable-game-content { width: 100%; height: 40rem; } .draggable-game { position: relative; border: 1px solid black; bor ...

htmlcss

Switch the class between two elements using a link

Here is the HTML code I am working with: <a href="javascript:"> <img class="remove" src="images/remove.png" /> </a> <div class="content"> <h2>About</h2> <p>We are Sydney Wedding Photographers and have ...

javascriptjqueryhtmlcss

iPhone-compatible iFrame with adaptable webpage dimensions

While attempting to embed our page on a client's site, everything looks great in a browser and our media queries are functioning properly. However, we encountered an issue when viewing the embedded page inside an iframe on an iDevice. It seems that th ...

ioscssiframeresponsive-designmobile-safari

Collecting *every single* link from a specified webpage and subsequently performing a keyword search on them

Just dipping my toes in the world of python language. I'm on a quest to gather all the links from a particular web page: Attempting to extract links using a python script from the following page: https://web.archive.org/web/*/ I'm particularly ...

pythonhtmlseleniumbeautifulsoup

Adjusting the transparency of my banner background image using Bootstrap 4

How can I make the background image transparent without affecting other elements like the navigation menu and main text? After researching online, I discovered that overlaying with a white image of the same size could be the solution. However, when attem ...

htmlcssbootstrap-4