Troubleshooting Bootstrap Social Buttons: Background Color and Hovering Challenges

I've been working with Bootstrap to design social buttons for Facebook and LinkedIn. However, I'm facing an issue where setting the background color to white for the buttons doesn't cover them properly. The white background extends beyond the social buttons, creating a visual inconsistency. You can see how it looks here: https://i.sstatic.net/zqMcV.png

The reason I set the background to white is to prevent the letters from blending in with the grey background if left untouched.

Here's the CSS code I have implemented:

.social a {
  font-size: 4.5em;
  padding: 1rem;
}

.fa-facebook {
  background-color: white;
  color: #3b5998;
}

.fa-linkedin {
  background-color: white;
  color: #0e76a8;
}

.fa-facebook:hover, .fa-linkedin:hover {
  color: #d5d5d5;
}

And this is the corresponding HTML code:

<div class="container-fluid padding">
    <div style="padding: 0px; margin: 0px;" class="row text-center padding">
        <div style="padding: 0px; margin: 0px;"  class="col-12 social">
            <a href="https://www.facebook.com/westernUBT/"><i class="fab fa-facebook"></i></a>
            <a href="https://www.linkedin.com/company/western-hasp/"><i class="fab fa-linkedin"></i></a>
        </div>
    </div>
</div>

Additionally, there seems to be a problem with detecting hover events on the social media icons. When hovering close to the gray area around the icons, the click event is triggered but I'm unsure why this is happening.

htmlcssbootstrap-4

Answer №1

To address this, you can utilize the pseudo-element :after.
Initially, eliminate the white background of the icons and apply position: relative to them. This is essential as the pseudo-element will be positioned absolutely.

It is crucial for the icon to appear in front of the new pseudo-element. Therefore, ensure that :before has a higher z-index.

Position it centrally so that the desired white effect is achieved.
Do note that this technique might not function perfectly with all kinds of icons.

Cascading Style Sheets (CSS):

body {
  background-color: #333
}
.social a {
  font-size: 4.5em;
  padding: 1rem;
}

.fa-facebook {
  color: #3b5998;
}

.fa-linkedin {
  color: #0e76a8;
}

.fa-facebook:hover, .fa-linkedin:hover {
  color: #d5d5d5;
}

.social i {
  position: relative;
}

.social i:before {
  position: relative;
  z-index: 1;
}

.social i:after {
  content: '';
  background-color: #fff;
  position: absolute;
  height: 88%;
  width: 88%;
  left: 6%;
  top: 6%;
}

To tackle the click area problem, consider replacing padding with margin and adjusting the font size of the icon itself (<i>) instead of the entire <a> element.

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

Discovering the background color of see-through HTML elements using Selenium

Looking to count the characters with a specific background color. I am currently traversing through all the HTML nodes using this method: Counting inner text letters of HTML element Example HTML Page: <span style="background-color: #ffff00;"> ...

htmlseleniumwebdriverbackground-color

What is the best way to position my Jchartfx area graph below my gridview?

When my page loads, the graph appears like this. It consistently shows up in the top left corner even though it should be positioned underneath the grid view as intended. var chart1; function createGraph(mpy) { if (mpy == undefined) mpy = 12.00; ch ...

javascriptjqueryhtmlcssjchartfx

Hide the 1, 2, 3 page buttons in Datatables pagination and instead display only the Next and Previous buttons for navigation

I recently implemented datadables.net pagination for my HTML table. I am looking to customize the pagination buttons by hiding or removing the 1, 2, 3 ... buttons and only display Next and Previous Buttons. Is there a way to achieve this by setting paging ...

javascriptjqueryhtmlpaginationdatatables

Images for navigating forward and backward in a jQuery datepicker

I'm experimenting with setting custom images for the previous and next month buttons. I attempted to utilize the prevText / nextText options of the datepicker in order to include a span with my own CSS class definition. However, this resulted in the c ...

jquerycssjquery-uidatepicker

Prevent the text within the textarea from wrapping onto the next line

My challenge involves a textarea where text overflows onto the next line when it exceeds the maximum characters. However, I want the text to continue on the same line with a scroll bar for better visibility. Here's an illustration: text here flows on ...

htmlcss

Trigger a jQuery alert when a row containing a specific attribute is clicked

I am trying to work with an HTML table that looks like the one below: <table id='messagelist'> <tr id="rcmrowMTM" class="message selected" aria-selected="true"> <td class="threads"><span class="threads"></span&g ...

jqueryhtml

Calculating available balance by subtracting the entered amount from the existing balance in Python Django

In the user profile model within my Django project, there are fields for available balance and current balance. I am looking to deduct an input amount from the current balance in order to display the updated available balance on the user's web page. ...

pythonhtmldjangodjango-models

The interaction between jQuery Masonry and Bootstrap results in unexpected grid behavior

I've spent hours trying to solve this problem, but I can't seem to get it to work as intended. I want the layout of my boxes to be like this using Bootstrap grids: However, after implementing the jQuery Masonry plugin (which I used to manage va ...

htmlcsstwitter-bootstrapjquery-masonry

Utilizing LessCss for color transparency and variable declarations with @vars

I'm attempting to create a function using LessCss, but I am encountering an issue: .transparent-border (@alpha:.15, @color:'0,0,0', @type: solid, @size:1px) { @val: @size @type rgba(@color, @alpha); border: @val; } The problem er ...

csssyntax-errorless

Selecting specific elements based on their position within a parent element using

I can't seem to figure out the strange behavior of the nth-child selector. After calling the function BackColor1(), my visual appears different than expected: Something seems off. However, when I call BackColor2(), everything looks normal again. Co ...

jquerycss

jQuery is working perfectly on every single page, with the exception of just one

Check out my code snippet here: http://jsfiddle.net/9cnGC/11/ <div id="callus"> <div class="def">111-1111</div> <div class="num1">222-2222</div> <div class="num2">333-3333</div> <div class="num3">444-4444< ...

javascriptjqueryhtmlcss

Exploring ways to access an element's background color through JavaScript

Is there a way to access an element's CSS properties that are set by a class name in JavaScript? In the case of the first div element, I have applied a "red" class which sets its background color to red. However, when I try to access the div's b ...

javascripthtmlcss

Padding for the initial element in a carousel display

I am currently working on implementing owl carousel with stage padding. My goal is to use the carousel with loop:false, and have the first item displayed without left padding, while maintaining consistent padding for both items on the left and right after ...

javascriptjqueryhtmlcss

What is the best way to retrieve the innerHTML content of an anchor tag with Cheerio?

Looking to extract data from an HTML page, a simplified example is provided below. Upon running the code, I anticipate the output to be [ "foo", "baz", "quux", ] but instead encounter an error message stating "TypeError: anch ...

javascripthtmljquerycheerio

The placeholder is invisible

After thoroughly researching this topic, I am still stumped as to why my Placeholder is not appearing. I would greatly appreciate any insights or expertise you can provide to help me understand what I might be doing incorrectly. <input type="text" name ...

htmlcsswebplaceholder

Troubleshooting Problems with React-Scroll Link Element in Navigation Bar

Having trouble implementing a hover effect on my navigation links using the Link component from the react-scroll library. The desired effect is for the links to increase in size when hovered over by using transform: scale(1.1). Unfortunately, the effect is ...

cssreactjsreact-scroll

Ensuring the validity of input tags

I encountered an issue with an input tag that has a specific logic: https://codepen.io/ion-ciorba/pen/MWVWpmR In this case, I have a minimum value retrieved from the database (400), and while the logic is sound, the user experience with the component lea ...

javascripthtmljquerycss

Covering the entire screen, the Div element takes up the entirety of

Just like with other pages, the main div always takes up the entire screen visible to the user. As they scroll down, another div becomes visible: example1 , example2 Regardless of the screen size, the main div will always fill the space visible to the use ...

javascripthtmlcss

Deactivating one div's class upon clicking on another div

Below is the HTML code snippet: <div class="container"> <ul class="navbar"> <li class="nb-link"><a>Home</a></li> <li class="dropdown"> <a>CBSE</a> <ul class="dropdown-menu"&g ...

javascriptjqueryhtmlcss

Connecting Filters Vue.js

I am in need of chaining filters. My goal is to implement the following filters: - A search filter - A checkbox styled price filter with pre-defined values such as <$10, $20-$50, $50+ - A checkbox styled filter for selecting 'topics' ...

htmlvue.js