Tips on placing a white background behind fa-3x (Font-awesome) icons

I am facing challenges while trying to customize the background behind my font-awesome icons. My goal is to create a white background that does not extend beyond the actual icon itself.

Currently, the result looks like the image below:

https://i.sstatic.net/sVAMs.png

As shown in the image, the white background is taking up too much space around the icon.

Code

 <div class="footer-icons">
                    <a href="#"><i class="fa fa-pencil-square fa-3x pen-btn"></i></a>
                </div>

Css

 .footer-icons a {
    padding-right: 10px; 
    color: green; 
 }

 .footer-icons i {
    background-color: white;   
    border-radius: 5px;
    padding-left: 3px;
    padding-right: 3px;
 }

I have attempted to adjust the padding values to make the background smaller and contained within the green icon.

Removing the padding altogether results in the following appearance:

https://i.sstatic.net/FGolG.png

I hope someone can point out what I might be doing incorrectly.

css

Answer №1

To customize the font, consider tweaking the line-height attribute. For a more visually appealing option, try utilizing an image file such as a png, svg, or gif. Take a look at this demo on jsfiddle for reference: http://jsfiddle.net/8rt6yv2u/

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

Having trouble getting the CSS 3 Spin feature to work?

Using webkit for previewing in chrome. The spinning circles I created are not working properly (definitely not an HTML issue.) #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } #loader { display: inline-bl ...

cssanimation

Troubleshooting: Why isn't External CSS Functioning Properly in Broadleaf

I have encountered a question regarding the use of a custom email template in broadleaf. It seems that I am unable to apply an external CSS file and can only use inline styles. Is this normal behavior, or am I missing something? Below is how I am attempti ...

cssspringbroadleaf-commerce

over line up text align on the baseline with hr

I'm looking to make sure the text is positioned just above the hr tag, similar to how the logout button appears with bootstrap. This is the desired outcome: https://i.sstatic.net/gIl1b.png Here's the code I have using bootstrap : <di ...

cssbootstrap-5

HTML is not connecting to CSS

I'm having trouble linking my external CSS to my HTML file. In the head of my index.html, I have this code: <head> <title>Twenty by HTML5 UP</title> <meta charset="utf-8" /> <meta name="viewport ...

javascripthtmlcssexpress

JavaScript code does not seem to be functioning properly on my computer, but it works perfectly fine on

While the code functions perfectly in JSFiddle, it seems to fail when I try to implement it in an HTML file. Despite my efforts, I am unable to pinpoint the source of the issue. If you'd like to view the working version, here is the Fiddle demo. Bel ...

javascriptjqueryhtmlcss

Embedding the scrollbar within the div container

I'm having trouble placing my vertical scrollbar inside my div and adjusting its position. To streamline the code, I have extracted a portion below: .toprightcontrols { margin: 0 3% 0 0; display: flex; position: absolute; justif ...

htmlcss

When using threejs, the color set for setClearColor is supposed to be white. However, when calling an external HTML file, it unexpectedly renders as

When I call an external HTML file in Three.js, the value for setClearColor is white but it renders as black. How can I solve this issue? Click here to view the image Here are the codes from the external file: <div id="3d-modal"></div> <sc ...

javascripthtmlcssiframethree.js

Troubleshooting Printing Issues on WordPress

After conducting a thorough search on Google to find solutions for this issue, I discovered that most of the fixes are specific to certain themes. While I did come across a suggestion to create a print.css file which partially solved the problem by printin ...

phphtmlcsswordpress

Creating uniform heights for HTML column-based tables using divs in a React environment

I am developing a unique column-oriented and div-based table using React with Typescript. The data outside the table is organized in a column-based structure, rendering column 1 followed by row 1, row 2, row 3, then column 2 with its respective rows. The ...

htmlcssreactjshtml-table

yet another dilemma with CSS height set to 100%

UPDATE: I believe there was an excess of information. Let me simplify my question: How can I adjust the height of #middle to be 100% of the remaining space in the example below: <body> <div id="big"> <div id="header"></div ...

htmlcssheight

Decrease the font size of text using intervals in CSS

I'm facing a challenge where I need to decrease the font size by 10% every 2 seconds. <div class="shrink"> text </div> .shrink{ transition: 2s linear all; font-size : 20px; } Is there a way to achieve this using only CSS? ...

css

Troubleshooting problem with Laravel and Vue integration

I have experience working on a Laravel and Vue.js project. Here is the code snippet for the Laravel view: @extends('layouts/app') @section('content') <div id="app"> </div> @endsection And here is the ...

csslaravelvue.js

Variability of pixel dimensions on various devices

When it comes to front-end design in CSS, the use of pixels as a measurement is quite common. However, with varying display sizes and resolutions, one might wonder how relevant this fixed pixel size really is. Is there a way to utilize real-world measure ...

cssresponsive-design

Combining jQuery and CSS for seamless background image and z-index chaining

I am facing an issue where I need to add a background image within a div containing a generated image with the class .result. Despite my attempts, I have not been successful in displaying the background image correctly. The code snippet I used is as follow ...

jquerycssbackground-imagez-indexjquery-chaining

Enhance your web design with the mesmerizing jQuery UI drop effect combined

I'm attempting to create an animated toggle effect on a box using jQuery UI's drop feature. However, I've encountered some trouble due to the box having box-sizing: border-box applied which is causing issues with the animation. During the a ...

jqueryjquery-uicss

Is it possible to include additional transformations to a div element?

Is it possible to add additional rotation to a div that already has a transform applied? For example, can I do the following: <div style="width: 200px; height: 200px; background-color: red; transform: rotateX(90deg) rotateY(10deg)" id="myDiv">< ...

javascriptjqueryhtmlcsstransform

The page container does not have a specified height

I am currently working on a website with the following structure: <body> <div id="container"> <!-- all content goes here --> </div> </body> My challenge is to center the page without using float, The body has a ...

csshtmlheight

Choosing an element with Selenium based on another element's attributes

My current project involves using Selenium and Java to interact with a table. I am trying to create a selector that can locate a specific column in the table and perform a right-click action on it. The challenge I am facing is that while it's easy to ...

javahtmlcssseleniumxpath

Techniques for positioning text beside an image in a floating block

Despite experimenting with various display settings such as block and inline for text, I am still facing issues. Please take a look at my website: ...

htmlcss

Transform in-line elements using specific HTML attributes using CSS styling

Can you achieve this with links (a[href="/"]{_/*CSS declarations.*/_})? For instance: #example > .meow span[style="color:red;"] { text-transform: lowercase; } #example > .woof span[title="I'm a dog."] { color: blue; text-decorat ...

htmlcssattributes