Is there a way to ensure that the font-awesome icon occupies the entire space within its parent container?

It is evident that the thumbs are extending beyond their parent container, resulting in an unsatisfactory UI layout.

The desired outcome should have the thumbs properly aligned within the parent container. Attempts to adjust margins or switch to a FLEX layout have proven unsuccessful. Any other suggestions?

Parent container

#vote-buttons-section .iconic-button#upvote {
  background: #7f7f7f !important;
  width: 75px;
  height: 55px; }
#vote-buttons-section .iconic-button#downvote {
  background: #7f7f7f;
  height: 55px;
  width: 75px; }

Font-awesome icons displayed using the BEFORE attribute

.ui-button.iconic-button.iconic-button-upvote:before,
.ui-button.iconic-button.iconic-button-upvote:hover:before,
.ui-button.iconic-button.iconic-button-upvote:focus:before {
  font-family: FontAwesome;
  content: "\f087";
  font-size: 55px;
  color: white;
  vertical-align: middle;
  line-height: 55px;
  }

.ui-button.iconic-button.iconic-button-downvote:before,
.ui-button.iconic-button.iconic-button-downvote:hover:before,
.ui-button.iconic-button.iconic-button-downvote:focus:before {
  font-family: FontAwesome;
  content: "\f088";
  font-size: 64px;
  color: white;
  vertical-align: middle; }
htmlcssflexboxfont-awesome

Answer №1

It appears that the heights of the containers are set to 55px. To center the icons, you can add the rule line-height: 55px; to the section that is responsible for handling the icons. Make sure to include it in the following selectors:

.ui-button.iconic-button.iconic-button-upvote:before,
.ui-button.iconic-button.iconic-button-upvote.ui-state-hover:before,
.ui-button.iconic-button.iconic-button-upvote.ui-state-focus:before

Once added, the icons should be properly centered. Feel free to adjust the font-size as needed, as long as the line-height remains accurate.

Answer №2

To enhance the design, consider incorporating height: inherit; along with some additional padding as shown below:

#vote-buttons-section .iconic-button#upvote {
   height: inherit;
   padding: 10px 10px;
}

If the above code doesn't produce the desired outcome, try adding !important to the CSS properties, like so:

#vote-buttons-section .iconic-button#upvote {
   height: inherit !important;
   padding: 10px 10px !important;
}

I hope this solution proves helpful.

UPDATE: It appears that your issue was already resolved by another user named Gustaf Gunér. I'm pleased to hear that you were able to fix the problem with their assistance.

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

Why is my output getting mixed up with the header on the navigation bar page?

output capture image https://i.sstatic.net/BYJnk.jpg here is the code snippet //ui.r library(shiny) navbarPage(theme = "style.css",img(src="logo.jpeg", width="300px"), tabPanel("Dashboard"), tabPanel("Products"), tags$head( t ...

javascriptjquerycssrshiny

Responsive design with Bootstrap grids

In the current 3 column layout, as the browser window size decreases, the columns stack in the order of first, second, and third. However, I want the behavior to change so that when the columns get smaller, they stack in a different order. First - This ...

htmlbootstrap-4

determining collisions between the character in my game and a specific block within a 2-dimensional array

Currently, I am working on a fun game project that involves some collision issues. The setup includes a player character drawn on one canvas and blocks (16x16px) drawn on another canvas. However, I am facing difficulties in detecting horizontal collision ...

javascriptjqueryhtmlcanvas

Is there a way to eliminate the gap between my menu choices?

Is there a way to eliminate the black line that appears between my menu options when using CSS hover? https://jsfiddle.net/jameskelly/3ejsu7gx/2/ a:hover { background-color: #ebebeb; font-color: black; } /* Custom styling for the ...

htmlcss

Issue with the Mat paginator items per page functionality not functioning properly in Angular 9

I have encountered an issue where changing the items displayed per page on a table I'm rendering from an observable is not functioning as expected. Despite trying methods such as ngAfterViewInit and calling page events, I did not see any changes. ...

htmlangulartypescriptangular9mat-pagination

Using Jquery's prependTo method will add a display:block property to

Can't find a solution to this issue. This is the code snippet in question: var new_img = '<img id="' + drag_id + '" rel="' + drop_id + '" class="' + gallery_link + ' drop_out" src="' + drag_src + '" /& ...

jquerycssprepend

Struggling with correctly processing values in an HTML PHP Form

Help! I'm struggling with my online PHP form that has checkboxes. When I leave the checkboxes empty and submit the form, the first checkbox option shows up as selected but the second one doesn't (which is correct). Even when I tick both checkboxe ...

phpjqueryhtmlformscheckbox

Issue with CSS background color not extending to full screen in webkit browsers when using 960.gs grid system

When using 960.gs, I have created a login screen with a div for the login form that has a background image. This div is positioned below a header, which centers it in the browser window. In my CSS, I am setting the body color as follows: body { backgr ...

htmlcss960.gs

Dynamic CSS columns with a set width on the left and right sides

Dividing my background into two parts has been a challenge. Background Image #1 Endlessly Repeating Background Image #1 Background Image #2 Endlessly Repeating Background Image #2 In CSS, creating a background with multiple elements is not as simple as i ...

htmlcssdynamic

Comparing Animation Width with Background Image Size

I'm currently facing a challenge with making my animation resize automatically based on screen size, just like my background image does. The width of the animation seems to be inconsistent or doesn't stretch across the entire screen as I intended ...

htmlcss

Is there a way to use the same background image for both the left and right borders?

How can I set this image as both the left and right background image on my webpage? I want it to be displayed on both sides. Any suggestions on how to achieve this? Here is the code snippet I have implemented so far: <%@ Page Language="C#" AutoEventW ...

htmlcssasp.net

Conceal a div when hovering above the navigation bar

Upon hovering over the second button in the menu, a "submenu" pops up covering part of the images within a div labeled as "container". The design of the submenu is somewhat translucent, causing the images inside the div "container" to faintly show through ...

javascriptjquerycss

Personalized jQuery Slider with automatic sliding

I am currently working on creating my own image slider without relying on plugins. 1st inquiry : How can I achieve horizontal animation for the slider? 2nd inquiry : I want the images to cover both the height and width of their container while maintainin ...

javascriptjqueryhtmlcssslide

Utilize the 'Save and add another' feature within a bootstrap modal

Hello everyone, this is my first time seeking assistance on this platform. If any additional information is required, please do not hesitate to ask. Currently, I am working with JavaScript in combination with the handlebars framework. Within a bootstrap ...

javascripthtmlbootstrap-4handlebars.jsbootstrap-modal

Eliminate the need for pressing the "tab" key on my website

I'm currently working on a horizontal web page layout and I'm looking for a way to disable the "tab" button functionality on my page. The issue arises because I have a contact form with textboxes located in the last div, and when users navigate u ...

javascriptjquerycsshtml

Saving Data in an Angular Material Table: A How-to Guide

I have a basic angular material table and I am looking for a way to save the data displayed in each row when a button is clicked. Is it possible to save each row of data as an object and push it to an array? If so, how can I achieve this? <div class=& ...

javascripthtmlangulartypescriptangular-material

What is the best way to create a header similar to the one in the image using only CSS

Wondering if it's possible to create a header like the one in the image using just pure CSS and without Photoshop. How can I design it in a professional manner? You can view an example of the image here. ...

htmlcss

Having difficulty deleting a checkbox element using JavaScript

My goal is to have a feature where users can effortlessly add or remove checkbox div elements as needed. The code I have written successfully adds and resets checkboxes, but I am encountering an issue when trying to remove them. I am struggling to identif ...

javascriptjqueryhtml

Sending information through AJAX in Elgg

Is there a way to transfer information between two PHP files using AJAX with Elgg? data_from_here.php <?php $entity = elgg_extract('entity', $vars, FALSE); $guid = $entity -> guid; require_js('javascript_file.js'); ...

javascriptphphtmlajax

Guide on creating HTML content within a ToolTip function for a table row

I'm working on implementing a tooltip feature that will appear when hovering over a row with extensive HTML content. This feature is intended to be used alongside Foundation framework. However, I am encountering issues getting the tooltip to work prop ...

htmlcsstooltipzurb-foundation