Styling a button with an icon using CSS

I designed a login button using Gmail's color scheme of green. Take a look at it, please

 <!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.button:icon {
    background: url(gmail-icon.png) no-repeat;
    float: left;
    width: 10px;
    height: 40px;
}    
</style>
</head>
<body>

<button class="button"><span class="icon"></span>Button</button>

</body>

However, I am having trouble seeing my icon on the button. Can someone explain why that may be happening?

htmlcssbuttonicons

Answer №1

Establish style guidelines for the .icon class using the following code snippet:

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.button .icon {
    background: url(https://image.flaticon.com/icons/svg/281/281769.svg) no-repeat;
    float: left;
    width: 20px;
    height: 20px;
    margin-right: 10px
}  
.button .span {
    float: left;
    width: 20px;
    height: 20px;
}  
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button class="button"><span class="icon"></span>Button</button>
</body>

Answer №2

Consider defining the symbol as a ".symbol" style and inserting it within the button container. Proceed to customize the appearance from that point onwards.

.button .symbol {
background-image: url(email-icon.png) no-repeat;
float: left;
width: 15px;
height: 45px;
}

Answer №3

Don't forget to include the quotation marks "" and instead of :icon, use .icon

Consider trying out this code snippet:

.button .icon {
    background: url("mail-icon.png") no-repeat;
    float: left;
    width: 25px;
    height: 25px;
    margin-right: 15px;
}

Answer №4

Opt for content over background

.icon {
   content: url("email-icon.png");
   float: left;
   width: 20px;
   height: 20px;
   margin-right: 10px;
}

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

Provide spacing on the sides for a background position

Is there a way to evenly space my background image with 10px margins on all sides instead of just the left side? Currently, it's only working on the left side. .login-page { display: flex; flex-direction: column; background: url("../src/As ...

htmlcss

The script fails to function on elements contained within an infinite scrolling feature

I am facing an issue with my code after implementing infinite scroll. The like script seems to be broken as the page gets refreshed when I try to like a post. Here is the Like-btn script: <script> $(document).ready(function(){ ...

javascripthtmldjangoinfinite-scroll

I require the ability to access a reference parameter with a dynamically changing name within a Vue template

<div v-for="x in 4" :class="(images[x] === null) ? 'not-removable' : 'removable'" class="img-container"> <input style="display: none" type="file" ...

javascripthtmlvue.js

Unlimited webpage scrolling downward

Recently, I was given a project to enhance a webpage and encountered an unusual issue. When the screen resolution drops below 900px (such as on small laptops and tablets) and you reach the bottom of the page, you can continue scrolling endlessly after seei ...

htmlinfinite-scroll

Tips for showing an Object with nested Objects in Vue.js

Looking for guidance on displaying a JSON object in Vue.js with the following structure: { "1": [ "15-16", "16-17", "17-18", "18-19" ], "2": [ & ...

javascripthtmljsonvue.jslistview

How can you prevent an element from overflowing when employing window.pageYOffset and using a switch case to alter the background color at specified pixel thresholds?

I want the <body> element's background-color to change every 500px as I scroll down. I've scoured the web for answers, but still can't figure out what's going wrong. Please review the code. However, Firefox Browser indicates that ...

javascripthtmlcss

Trigger an alert message upon loading the HTML page with search text

I need to search for specific text on a webpage and receive an alert if the text is found. <script type='text/javascript'> window.onload = function() { if ((document.documentElement.textContent || document.documentElement.innerText ...

javascriptjqueryhtml

"Position the input file with Bootstrap's input text for a seamless alignment

After experimenting with the design of my input file using this code snippet, I am facing difficulties aligning the button within the text input of a bootstrap element. Below is the code I have used to style my input field, but unfortunately, the bootstra ...

css

Warning: Accessing a string index without initialization: 0

Currently, I am encountering some errors while attempting to insert only non-empty rows with multiple inserts. The problem seems to lie within the for loop, but I am struggling to comprehend the error and resolve it. The list of errors includes: Notice ...

javascriptphphtmlajax

Conceal Element without Eliminating from the Design

Need a solution: I have specific icons to display for certain elements, but not all. However, when hiding the icon, I want the spacing of the element to stay consistent. Is there a method to conceal an image within an element while preserving its allocat ...

htmlcss

Issue with Bootstrap's pull-right class causing elements to overlap

I need help positioning a single button above a list, with the button to the right. Whenever I try using the pull-right class on the button (or its containing div), the button ends up being covered by the list. <div> <div class="pull-right"& ...

htmlcsstwitter-bootstrap

Hover over elements to reveal D3.js tool tips

Currently, I am utilizing a tutorial for graph tooltips and finding it to be very effective: http://bl.ocks.org/d3noob/c37cb8e630aaef7df30d It is working seamlessly for me! However, I have encountered a slight problem... In the tutorial, the graph disp ...

javascriptcssd3.js

Leveraging HTML within jQuery UI autocomplete

In the past, I was able to include HTML in the JSON array I used for autocomplete with jQuery UI before version 1.8.4. For example: $row_array['label'] = '<span style="color: red; font-family: courier;">User, Name</span>'; ...

htmljquery-uiautocompletejquery-ui-autocomplete

Executing an AngularJS function within a form element using the ng-submit directive

I have created an AngularJS function that I intend to call in my form tag. However, when I use this function in my html form within the ng-submit attribute, it does not redirect or perform any action. When I click on the button, nothing seems to happen a ...

jqueryhtmlangularjs

Sorting through various data inputs in one JSON file

I have a JSON file containing an array of objects: obj= [{fname:"abhi",age:5,class:"ten",lanme:"kumar" },{fname:"abhi",age:5,class:"ten",lanme:"kumar" },{fname:"abhi",age:5,class:"t ...

javascripthtmlreactjsuitableviewmaterial-ui

Implement a Horizontal view feature in the FullCalendar API

In my project, I am utilizing the full-calendar API to create a vertical resource view. Everything works perfectly when I have around 10 resources. However, once I increase the number of resources in my project, the view becomes distorted. https://i.sstat ...

htmlcssfullcalendar

Click a button to adjust the height of an element

My webpage features a dashboard with tabs on the left and corresponding content on the right. To ensure proper alignment, I have utilized Bootstrap to create two columns - one for the tabs and one for the content. However, I am facing an issue where the bo ...

javascriptjqueryhtmlcsstwitter-bootstrap

Determine the length of the content within an HTML container that has

I am attempting to retrieve the length of the container's content in HTML dynamically. However, I am only receiving the object instead of the desired result. <script> $(document).ready(function (e) { var adsense_box_len = $(&apo ...

jqueryhtml

What steps are required to establish a PHP development and production environment?

I find myself in the position of taking over a small PHP site that relies on a database. While I'm well-versed in C# programming and have experience with databases and web design, I am quite unfamiliar with PHP. My boss wants me to establish both a s ...

phphtmlweb-applicationsdevelopment-environmentphp-5.2

Is there a way for me to enable the user to easily download the HTML file?

Is there a way to create an Invoice in HTML rather than a PDF-file and provide the user with an easy download link for the HTML-file? When I simply link to the HTML file, it only seems to be "temporarily downloaded" and viewed in the user's web brows ...

htmlhyperlinkdownloadinvoice