Can someone provide assistance on how to add an icon to a button?

Help needed with adding icons to buttons!

I am new to coding and struggling with adding icons to each button. If any classes need to be changed, please let me know. I am currently learning HTML and CSS and could use some guidance. Thank you!

Example:

.social-sharing {
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
}

.social-sharing ul.menu-social {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrapwrap;
  flex-wrap: nowrap;
}


.social-sharing ul.menu-social li.telefono {
  flex: 1 1 auto;
  background-color: #3d3d3d;
  
}

.social-sharing ul.menu-social li.next {
  flex: 1 1 auto;
  background-color: #3d3d;
}

.social-sharing ul.menu-social li a {
  display: block;
  color: #fff;
  text-decoration: none;
  width: 100%;
  height: 120px;
  line-height: 40px;
}
<aside class="social-sharing">
    <ul class="menu-social">
    
    <li class="social-item telefono"><a href="#">Teléfono</a></li>
      <li class="social-item telefono"><a href="#">Whatsapp</a></li>
        
    
    </ul>
</aside>

Answer №1

Include an SVG image within a link (effective method)

<li class="social-item telefono"><a href="#">
<svg width="10" height="20" viewBox="0 0 10 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d=" YOUR PATH "></path></svg>
Whatsapp</a></li>

Alternatively, increase padding for the icon and utilize background-image property (less effective approach)

a {padding-left: 80px; padding-right: 40px; background-image: url(....); background-position: 40px center; background-size: 40px 40px; background-size: contain; background-repeat: no-repeat}

Another option is to add a pseudo-element and place the image within it

a {position: relative; padding-left: 80px; padding-right: 40px;}
a:before {position: absolute; left: 40px; top: 20px; width: 40px; height: 40px; background: url(......) 50% 50% no-repeat; background-size: contain;}

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

Could Knockout's value binding potentially lead to a script injection vulnerability?

My understanding is that knockout effectively deals with this scenario, but I just want to double-check. Is it correct to assume that when using the value binding with a form control such as input/textarea, there is no risk of a script injection attack? O ...

Using a color as a substitute for a background image on mobile devices

Is there a way to create a fallback in my CSS for changing the background image to a color when viewed on a mobile browser once the pixels reach the max-width? In the snippet below, the media query "only screen and (max-width: 600px)" works if the top bod ...

Learn how to align a form to the right using HTML, CSS, and Bootstrap

I am completely new to front-end technology. I have been attempting to write some code for my backend app using Html, Css, and Bootstrap. Currently, I am trying to place a search form on the right side of my webpage. Can anyone help me figure out what I am ...

`Modify the title property of raphael elements`

I am currently using raphael.js for drawing and I would like to customize the title attribute (such as changing color, font size, etc). circle.attr({ title: 'This is a circle.', fill: 'red' }); You can view my example on jsfi ...

``Incorporate images into a slideshow container with proper alignment

I'm currently using a jquery slideshow on my homepage with fading images, but I'm having trouble centering them. The images are all different sizes and they're aligning to the left instead of being centered. Here is the CSS code I've b ...

Responsive Video Embed Using Bootstrap-5

I'm facing some challenges with Bootstrap responsive video embedding. It seems like the parent container is not responding to changes, only the content within the <iframe> tag is being responsive. Any idea what might be going wrong? .embed- ...

The horizontal display of JqueryMobile radiobuttons is not appearing correctly

My aim is to dynamically generate a set of radio buttons using JQueryMobile. Everything seems to be working fine except for the data-type='horizontal' attribute: On looking at this fiddle, you'll notice that the "created-via-js" radio group ...

Using jQuery to vertically center a div

When a vertical menu on my website is clicked, it pops out from the left side of the screen. The content inside is vertically centered using CSS transformations. While expanding to show sub-items, everything remains centered. However, there's an issue ...

HTML5 - Transforming your webpages into interactive flipbooks

Is there a way to achieve a page-turn effect when loading external HTML pages into a div? I am interested in utilizing CSS3, HTML5 or jQuery for this purpose. ...

How can I trigger a CSS animation to replay each time a button is clicked, without relying on a timeout function?

I am having trouble getting a button to trigger an animation. Currently, the animation only plays once when the page is refreshed and doesn't repeat on subsequent clicks of the button. function initiateAnimation(el){ document.getElementById("anima ...

Template not found: Error encountered in nodemailer-express-handlebars: ENOENT: The specified file or directory does not exist in the node

I've been attempting to utilize nodemailer and express-handlebars in my node.js application to send a template form. However, I keep encountering the "no such file" error. Unfortunately, I have no clue what I'm overlooking or missing. Here is m ...

How can I use jQuery to set the color of every other row in a

I'm facing an issue where I want to use jQuery to set the color of alternate rows in an HTML table. However, every time I add a new row, the color of the entire table switches. Below is the JavaScript code snippet that I am utilizing: var alternate = ...

Close the Bootstrap modal upon clicking the "Ok" button in SweetAlert2

I need help with closing my Modal Bootstrap after clicking the Ok button in SweetAlert. I've attempted various methods, but none of them have worked so far. I'm not sure if I'm implementing it correctly, but I've utilized JQuery for thi ...

Issue with specific selectors causing React CSS module malfunction

Currently, I am a beginner in learning React and have been experimenting with CSS modules. Even though Menu.module.css is mostly functioning correctly, it seems to be having an issue applying styles to the .menu a.last selector for some reason (although i ...

Dynamic Material UI TextField underline width using JSX in React

I recently encountered an issue while trying to add padding to my TextField component. I applied the padding to the root 'style' property, but it caused the underline to overflow beyond the designated area to the right by the same amount as the p ...

Customizing color schemes of bootstrap buttons and dropdown-toggle elements

My button group looks like this: HTML <div class="btn-group"> <button type="button" class="btn btn-default btn-xs red-outline-button"> Sync </button> <button type="button" class="btn btn-default btn-xs gold-outline-button" da ...

Embed a div opening tag within a jQuery function for one element, and then add a closing div tag after another element

Struggling with examples from the jquery documentation, I find it difficult to add a div before a specific list item and then close it after another using different classes for each li element. The prependTo and append functions don't seem to work as ...

Using a CSS height of 100% does not always result in filling 100% of the parent's height

My parent div has a height of 250px. I then have multiple children with their min-height set to 100%. While the debugger confirms that the selector is correct and targeting the right elements, the height does not fill the parent's height at all; inste ...

Tips for maintaining space beneath an image when text wraps around it

.blogimgarea { width: 38%; padding-right: 26px; float:left; } img{max-width:100%} .blogtextarea { width:55%; padding:22px 32px 0 0; float:right; } <div class="newpostregion pt70"> <div class="blogimgarea"> <img class="featblogimg" src="https ...

Anchor link leading to an incorrect location

Sorry for the potentially silly question, but I'm struggling to figure out what's happening here. I'm currently working on a website and trying to create an anchor link at . I've placed the anchor just before in this code: <a name ...