Tips for positioning icons inserted using the :before method

Is there a way to center align an icon added using the :before method?

Below is the current code snippet:

<div class="button submit">
  <a class="submit check_car_search" href="#" >Some Text</a>
</div>

CSS:

.button a{
    background: none;
    background-color: #32BBE7;
    text-indent:1px;
    color:#FFF;
    text-decoration: none;
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    height: auto;
    padding: 10px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 50px;
    font-style: italic;
}

.button a:hover{
    background-color: #2597F0;
}


.button a:before {
    content:url(https://i.stack.imgur.com/tKsDb.png);
    position: relative
}

JSFiddle: https://jsfiddle.net/1z83tc1o/

Could someone provide guidance on vertically centering the icon in relation to the text?

htmlcss

Answer №1

You have the option to utilize the background property and specify its size (width, height). Afterwards, you can employ the vertical-align property.

CSS

.button a:before {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 16px;
    vertical-align: middle;
    content:"";
    background: transparent url(https://i.stack.imgur.com/tKsDb.png) no-repeat center center;
    margin-right: 20px; // Optional

}

CHECK OUT THE DEMO HERE

Answer №2

To achieve perfect vertical alignment of the icon, you can utilize the background property along with absolute positioning.

.button a:before {
    content: " ";
    background-image: url(https://i.stack.imgur.com/tKsDb.png);
    position: absolute;
    width: 18px;
    height: 16px;
    top: 50%;
    margin: -8px 0 0 -25px;
}

For a visual example, check out this link: https://jsfiddle.net/1z83tc1o/3/

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

displaying data in a table - adjust cell contents for smaller screens

I am currently designing an admin page using Bootstrap 5. I have implemented a data table with the following contents: On larger screen sizes: https://i.sstatic.net/2a9C1.png For smaller screen sizes (mobile phones), I have collapsed the action button as ...

htmldjangodatatablesbootstrap-5

How does using position: fixed affect width in React components?

Can someone explain why my sidebar width is reduced when I apply position: fixed? Here is the code snippet: https://codesandbox.io/s/1yr3nlqp74 Steps to reproduce the bug: Open the code in a new window (full screen) Observe the picture before and after ...

reactjscssreact-reduxmaterial-ui

Guide to changing the color of SVG images on a live webpage

I'm having trouble changing the color of a specific part within an svg image (created in Inkscape). I believe CSS is the solution, but I can't seem to select the id from the particular SVG file. The object in the SVG has the id='ToChange&apo ...

javascripthtmlcsssvg

Creating an interactive star rating system with JSON data

Currently, I am in the process of developing a star rating system specifically designed for restaurant reviews. The 'Attributes' displayed on the user interface are dynamic and fetched in JSON format. There exist five attributes with each having ...

javascriptjqueryhtmlcss

Retrieve a compilation of Whole Foods locations through the use of rvest

I want to retrieve a list of Whole Foods stores using the rvest package. I've successfully extracted information from various sources like Wikipedia, FIFA, and Yahoo! Finance using this method. However, in this case, the table spans multiple pages but ...

htmlrweb-scrapinghtml-parsingrvest

The tooltip for the Google+ button stopped working

After setting up my Portfolio, I added a Google+ button. However, the page lacks styling and there seems to be an issue with the tooltip causing delays. Can anyone help me identify where the problem lies? ...

javascriptcsshtmlgoogle-plus-one

Ways to access the HTML content of a component in vue.js

I have a unique html template displayed below CustomTemplate.vue <template> <div class="content custom-page"> <md-card class="page-display"> <md-card-header class="page-header"> <md-card- ...

javascripthtmlprintingvue.js

Illuminated Box with Text Beneath Image Overlay

Is there a way to customize the text displayed under each zoomed-in image even further, using images, etc. instead of just relying on the alt text? An ideal solution would involve displaying the text in a div. You can find the codepen here: // Looking ...

javascriptjqueryhtmllightbox

Column content merging in BS layout

Currently, I am exploring how to implement a two-column layout with the left column serving as a scrollable navbar. At this early stage of development, please excuse any imperfections in the code! One issue that arose involved using the .sidebar class wit ...

csshtmlbootstrap-4

Tips for activating this effect even when the window is resized during page scrolling

There's a code snippet that enables the header to become unfixed when a specific div reaches the top of the screen and then scrolls with the rest of the content. While this solution works perfectly, I encountered a problem where the calculations for ...

javascripthtmlcsscss-position

Tips for eliminating the default margin without using a float

Exploring the world of divs and buttons led me to an interesting discovery: removing a float creates a natural margin. Upon entering this styling: body { background: gray; } button { font-size: 17px; color: white; margin-l ...

htmlcss

Utilize CSS styling for elements persistently, even following a postback event triggered by

In my asp.net app, I have multiple hrefs with dynamic Ids that all share the same CssClass called MyClass. I am looking to hide these buttons based on a certain condition. Initially, I used the .ready function: $(document).ready(function() { if(condit ...

asp.netjquerycss

Applying CSS blur filter to container without affecting its content

I'm trying to create a hover effect where an image within a parent div transitions into a blurred state. However, I've run into an issue where if the image is set to 100% width/height of the parent div, there is a visible bezel of the parent&apos ...

htmlcssfiltercss-transitionsblur

AInspector WCAG evaluation found that mat-select does not meet level A compliance standards

As I work on making my website WCAG level A compliant, I've encountered an issue with the mat-select component in Angular material. After running checks with the AInspector extension for Firefox, it appears that the mat-select component lacks aria-con ...

htmlangularangular-materialaccessibilitywcag

What is the best way to display table headers for each record on mobile devices? Is there a way to create a stacked view

I recently started working with bootstrap, specifically version 3. I am currently trying to find a way to create a layout that resembles a regular table when viewed on desktop but switches to a stacked format on mobile devices. This is the design I am aim ...

htmlcsstwitter-bootstrap-3

Can someone help me troubleshoot this issue with my code so that my website can open in a blank page using about:blank?

I'm currently facing an issue while trying to make one of the pages on my website open with an about:blank URL upon loading. Despite embedding the code in my index.html file, it doesn't seem to be functioning properly. Here's the code I&apos ...

javascripthtml

Can a Div Maintain White Space No Wrap and Stretch to the Full Width of its Parent Element?

Within a parent element, I have a div that allows for horizontal scrolling. Using CSS and jQuery, the content can overflow horizontally with white space no wrap. Setting a fixed width for the div works well, but my responsive website requires a dynamic wid ...

jqueryhtmlcss

Disable text input in Flatpickr and remove the default iPhone calendar

We are facing an issue with the iPhone and iPad when using flatpickr for our calendars. When the calendar is opened, the cursor automatically focuses on the text box, triggering the default iPhone calendar to appear below. This problem does not occur on An ...

cssiphoneflatpickr

The website lacks accessibility features such as a text size swapper, but the contrast swapper is not functioning properly

As I embark on my first website project that requires accessibility controls, I find myself in need of the ability to adjust text size and contrast settings. Specifically, I want to offer options for small, default, and large text sizes as well as normal, ...

jquerycssaccessibility

Why is my Selenium program consistently throwing a NoSuchElementException regardless of the type of element query I try?

Looking for a solution to an issue with my Selenium code. I am attempting to extract data from a stock data website but keep encountering a NoSuchElementException. When using a JS query in the Chrome developer console, everything works fine: document.getE ...

javahtmlseleniumgoogle-chromeweb-scraping