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

Uploading files with Angular and NodeJS

I am attempting to achieve the following: When a client submits a form, they include their CV AngularJS sends all the form data (including CV) to the Node server Node then saves the CV on the server However, I am encountering difficulties with this proc ...

Obtaining values from alternating nodes in a SQL query

Can anyone help with extracting values of odd and even nodes in SQL from this XML example? declare @htmlXML xml = N'<div class="screen_specs_container "><div class="left_specs_container">Compatibility:</div><div class="right_spe ...

JS unable to insert new row in table

I checked the input value before submitting it in the form and confirmed that it is correct, returning as a string.enter image description here const saveList = () => { const inputListNameText = inputListName.value; fetch('/api/lists' ...

Adjust the width of xAxis[0] and xAxis[1] in Highcharts to their default values

Hi there, I need some help with Highcharts. Is it possible to adjust the width of xAxis[0] and xAxis[1] as well as reset the offset of xAxis[1] at runtime? I have a chart with two x-axes that need to be resized to fit different sized divs. You can see an ...

The clickable areas for the href and onclick functions are extremely small and positioned inaccurately on the screen

The code below is supposed to load an image of a 'close window' button that should be clickable. However, when the page loads, the clickable area is only a couple of pixels wide and a pixel or two high, positioned just below or above the center o ...

Tips on designing checkboxes with CSS

Can someone help me figure out how to style a checkbox using the code below? <input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" /> I've tried applying this style but it doesn't seem to work. The chec ...

How to transfer a java list to an html template

I have extracted some information from an HTML file that relies on input from a Map structure as demonstrated below Template t = TemplateLoader.load("Printing/account.html"); Map<String, Object> map = new HashMap<String, Object>(); map.put("a ...

Exploring CSS3 animations: customizing animations for individual elements based on scroll movements

Can you help me with CSS3 animations triggered by scrolling? I came across a code that reveals a DIV element as the user scrolls down: <script type="text/javascript"> $(document).ready(function() { /* Every time the window ...

Can Phonegap be utilized to port a PlayN game to iOS?

PlayN seems like a fantastic tool for creating Html5 games. I'm curious to know if there are any plans to ensure that the html/javascript output is compatible with Phonegap, ultimately allowing for the creation of an iOS executable? ...

Tips for making a horizontal grid layout with three items in each row

I have a scenario where I need to render a group of Player components using map() loop, and I want them to be displayed horizontally side by side using a Grid component from material-ui. Currently, the components are rendering in a vertical layout: https ...

Adjusting the <div> size for optimal display on iPhone and iPad screens

I am having an issue with my jQuery Mobile app. I have a page with a header and footer, and the main content consists of 4 images arranged in a 2x2 grid format. Since I couldn't get JM grid to work, I created my own grid using a div container. Here is ...

Correctly align the div on the screen as the viewport is scrolled

I am currently working on a parallax website where the sliders are designed to slide from the left and align within the viewport as the user scrolls. However, I have encountered an issue where multiple scroll actions are required for the slide to align pro ...

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 = ...

Chrome Bug with Fixed Position Background

Just finished creating a website that features fixed images as backgrounds with text scrolling on top of them. I've noticed an issue when using Chrome - the scrolling stops briefly between backgrounds, pauses for about a second, and then resumes. I&ap ...

Ensure child elements do not surpass parent size in HTML/CSS/Javascript without altering the children directly

I am intrigued by how iframes neatly encapsulate all site data within a frame and adjust it to fit the size. Is there any method to achieve this functionality in an HTML wrapper? Can the wrapper be configured so that regardless of the content, it is dis ...

What are the possibilities for modifying a MySQL database using HTML?

Currently, I have a MySQL database managed through phpmyadmin that I would like to present as an HTML table for easy editing of records and columns directly. I am unsure about the terminology to use when researching possible solutions. What options are av ...

HTML - Lists Not Displaying Properly in Numerical Order

My goal with HTML is to: Produce 2 Numbered Lists Nest an Unordered List within Each Ordered List and add elements inside Unfortunately, my numbering isn't displaying correctly. Instead of 1. 2. etc., I'm seeing 1. 1. Below is the code I am u ...

Increase the size of the textarea when it is clicked on and revert back to its original size when it

My question revolves around a text area that I am trying to manipulate through jQuery. The desired functionality is to increase the height of the text area whenever someone clicks on it, and decrease the height when clicking anywhere else on the screen. & ...

The persistent Bulma dropdown glitch that refuses to close

In the project I'm working on, I have implemented a Bulma dropdown. While the dropdown functions correctly, I am facing an issue when adding multiple dropdowns in different columns with backend integration. When one dropdown is open and another is cli ...

Different placeholder text rendered in two text styles

Can an input box placeholder have two different styles? Here's the design I have in mind: https://i.stack.imgur.com/7OH9A.png ...