Ensure the Facebook icon is perfectly aligned with the text inside the button

I've been experimenting with the code here
Unfortunately, I couldn't achieve the desired output. My goal is to center align both the icon and text inside the button.
I would appreciate any assistance in fixing this issue.
You can find my jsfiddle here

Here is the HTML code:

<p class="SecWrapper">
    <a href="" class="fbLogin fbBtn clearfix">
        <span style="margin:0 auto;">
            <i class="fbIcon spriteIcon"></i> 
            <i class="pull-left">Log In with Facebook</i>
        </span>
    </a>
</p>

And here is the CSS code: 

.SecWrapper{width:300px;}

.fbBtn,a.fbBtn{padding: 13px;
                background: #2a6496;
                width: 100%;
                display: block;
                color: #fff;
                text-align:center;
                }

a.fbBtn:hover,.fbBtn:hover{color: #fff;}

.spriteIcon{float: left;
            background: url(http://i.imgur.com/egJconX.png) no-repeat;
            }

.fbIcon{background-position: -9px -65px;
        width: 20px;
        height: 25px;
        }
htmlcssbackground-imagecss-positioncss-sprites

Answer №1

For effective CSS Positioning, make sure to apply position: relative; to your container element. Utilize position: absolute; and the left top properties to position the F icon accordingly.

View Demo

.SecWrapper{
     width:300px;
     position: relative;
}

.fbIcon{
     background-position: -9px -65px;
     width: 20px;
     height: 25px;
     position: absolute;
     left: 70px; 
     top: 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

Guide to personalizing checkbox design using react-bootstrap

I am working with react-bootstrap and attempting to style a custom checkbox, as it appears possible but is not working. I have followed the documentation provided here. Here is the code snippet: import * as React from "react"; import { t as typy } from & ...

cssreactjsreact-bootstrap

Secure your URL with password protection

I have a website that requires restricted access upon entry. Prior to loading the page, users must enter three fields: username, password (belonging to the client), and a specific password unique to that particular page. These credentials are stored in a d ...

phpjavascriptmysqlhtml

Choppy Animation in Bootstrap 4 Collapsible Card Design

Creating a card using Bootstrap 4 with a .card-header and .card-block: <div class="card"> <div class="card-header"> <a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block"> car ...

javascriptcsstwitter-bootstraptwitter-bootstrap-4bootstrap-4

Creating a search field in Bootstrap 4 that emulates material design, facing challenges with transition animations

I tried to create a material design search field using Bootstrap form input. While I was able to make it work, I noticed a small issue with the focus state. When I click inside the field, the underline animation runs smoothly. However, when I click outside ...

htmlcsstwitter-bootstrapbootstrap-4

Utilize Bootstrap to align fields in the center

I'm new to using bootstrap and I could really use some help centering these text boxes and button. Any additional suggestions for improving the code would be greatly appreciated. My code is based on this template: https://github.com/BlackrockDigital/ ...

htmlbuttoninputbootstrap-4center

Setting custom domains on Heroku is essential for optimizing the performance and branding of my website

Essentially, when using Heroku, you are provided with a default domain: XXX.herokuapp.com. Personally, I have a collection of REST APIs that I want to configure on a domain called: api.myDomain.com. At the same time, I also have my HTML files (web view) ...

htmlurlherokucloudsingle-page-application

Display additional information upon hovering without disrupting the neighboring elements

When I hover over a component, I want to display more details and scale it up. However, this action ends up displacing the surrounding components. Take a look at the screenshot for reference: https://i.sstatic.net/ElXvk.jpg Below is the code snippet wher ...

cssreactjsnext.jsmaterial-ui

Specify the upper limit for a numeric input using Vuejs

My Vue.js script looks like the following: <template> <div> <div v-if='cart.length > 0'> <h1>Your Cart</h1> <template> <fieldset v-for='produc ...

javascripthtmlvue.js

Contrasts in Bootstrap 5.3 color schemes between development and live environments

Currently in the process of building a website using Astro [^2.2.1], Bootstrap [5.3.0-alpha3], and Svelte [^3.58.0]. Most components are functioning correctly, except for some elements like buttons where the foreground and background colors seem off. I&apo ...

csssassbootstrap-5astrojs

Having trouble with my bootstrap carousel not functioning properly - issue with jQuery line causing the rest of the code to disable

I've been facing some challenges with this Bootstrap slider for quite some time now. Despite my best efforts and thorough research on the forum, I just can't seem to make it function properly. Here's the code snippet in question: <!DOCTY ...

javascriptjqueryhtmltwitter-bootstrapcarousel

Is there a way to prevent the source of <img> from being downloaded?

I am looking to incorporate a flip-book-plugin, such as , onto my website. However, I have concerns about using raw <img> tags that allow users to easily view and download the images. I want to prevent this scenario by implementing some form of prote ...

jqueryhtml

Is it acceptable to assign unique names to individual arrays within a multidimensional array?

I was curious about the possibility of naming arrays within a multi-array, similar to how it can be done with individual arrays. For example: var cars = new Array(); cars[0] = "Saab"; cars[1] = "Volvo"; cars[2] = "BMW"; I was wondering if there was a way ...

javascripthtml

HTML Crossword Puzzles

This intriguing puzzle exclusively allows lowercase letters. How can I modify it to accept both upper and lowercase letters? Alternatively, is there a way to prompt the user to disable caps lock? HTML <body onload="initializeScreen()"> ...

javascripthtmlcsscrossword

Center text vertically within an HTML Bootstrap row

I am creating a Bootstrap row with three columns - col-sm-2, col-sm-8, and col-sm-2. In the first column, I plan to insert a card, in the second column some text, and in the third column a tooltip. This row will be repeated multiple times. As a beginner ...

htmlcssbootstrap-4

Centering the logo using Material-UI's alignment feature

Need help centering a logo in my login form using Material-UI. Everything else is centered except for the logo, which is stuck to the left side of the card. I've tried adding align="center" and justify="center" under the img tag, but it's still ...

cssreactjsmaterial-ui

Exploring the use of Shadow DOM in ContentEditable for securing text segments

I have recently been working on creating a basic text editor using ContentEditable. The main requirement for the application is to allow users to insert blocks of text that are protected from typical editing actions. These protected text blocks should not ...

javascripthtmlcontenteditableweb-componentshadow-dom

Determine the outcome with a PHP conditional statement for either "

I'm currently working on adding a function to a script where the user is prompted for a code, which I have successfully added. However, I am facing an issue in determining when to ask the user for the code and when not to. So, I believe I need to use ...

phphtmlif-statement

AngularJS and Bootstrap carousel combined for a dynamic multi-item per slide display

Currently, I am utilizing Bootstrap to showcase a carousel on my website, where multiple items are displayed per slide as demonstrated in this example. The use of static images has yielded satisfactory results, as evidenced by the jsFiddle example found he ...

javascriptcssangularjstwitter-bootstrapcarousel

Scrolling to the next wrap class in jQuery is not functioning properly with the chatbox and ScrollTop

I have created a chat box using jQuery. However, I am facing an issue where when I click the button multiple times, the scroll returns to the top. My objective is for the scroll to move to the next wrap class when the button is clicked. Here is a snippet ...

javascripthtmljquerycss

What could be causing the paragraph margins to overlap and not display properly?

Two pages with identical layout and CSS stylesheets. One page displays correctly, while the other has overlapping margins for paragraphs. Unable to share entire source code due to length. Seeking insight into potential causes of this issue. https://i.sst ...

htmlcss