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

CSS experts caution that the addition of margin and padding can cause the screen to jump

When I apply margin and padding to this class, it starts glitching like in the second GIF. However, if I remove margin and padding everything works fine, but I do need them for styling purposes. What could be causing this issue and how can I resolve it? ...

htmlcss

Site optimized for mobile devices

I need to create a website that is optimized for mobile devices like Android, iPhone, and Blackberry, as well as desktop and tablet. The screen resolutions of these devices can vary greatly. My supervisor has suggested developing one site that can adjust ...

phpcss

Storing the values of three checkboxes in individual variables to be passed into distinct columns

Below is the HTML code for checkboxes, with a function that limits only three selections: <form class="interestSearchCriteria"> <input type="checkbox" name="walking" value="Walking"> Walking <input type="checkbox" name="running" value=" ...

phpjqueryhtmlajax

Automate populating input fields with data

I need help with a form that has four input boxes. Is it possible to automatically fill the remaining three input boxes with the value entered in the first box when the user clicks a button using JavaScript? Or should I aim to prefill the textboxes with ...

javascripthtml

Displaying a div in Vue.js when a button is clicked and an array is filled with

Hey there! I'm having an issue with displaying weather information for a specific location. I want to show the weather details in a div only when a button is clicked. Despite successfully fetching data from the API, I'm struggling to hide the wea ...

javascripthtmlvue.jsvuejs2openweathermap

An issue encountered while employing the mix function in LESS within a Rails environment

Applying the less-rails gem. Implementing this code snippet to blend two colors: @base: #ffdc52; @add: #195742; .colour{ color: mix(@base, @add); } Encountering the subsequent error message: Less::ParseError: error evaluating function `mix`: Cannot ...

ruby-on-railscsslessparse-errorless-rails

Previewing a PDF file with multiple headers displayed above the text content

Creating multiple headers for each page of a PDF document using dompdf can be tricky. The headers you generated are fixed at the top with a width of 100%. However, you are facing an issue where on the second and subsequent pages, the header overlaps with t ...

phphtmlcsspdfdompdf

Blackberry Browser 4.2 experiencing spacing troubles

Seeking advice for developing a web application specifically for the Blackberry Browser 4.2. Looking to add vertical spacing between a series of links, but struggling due to lack of support for padding and margin in this version. Have tried using height an ...

htmlbrowserblackberrylayoutrim-4.2

Tips on displaying text inside an icon

As a self-taught newcomer to web development, I apologize if this is a basic question. I'm trying to figure out how to display text inside an icon, like putting a number inside a heart. Would using a webfont icon not be suitable for this purpose? Is ...

cssicons

Incorporate a progress bar and delete functionality for uploading files in PHP

I am currently working on creating a file uploader that includes a progress bar and a close button. However, I have encountered some major issues with the code. The progress bar continues to show endlessly, and the main problem is that it deletes the file ...

phphtml

Retrieve all HTML elements, including their closing tags, from a file with Java, without relying on external libraries such as Jsoup

Recently, I've been working on a piece of code that reads an HTML file, extracts all the opening HTML tags, and displays them. However, I have been thinking about how to also include the closing tags in the output. At the moment, the code prints: < ...

javahtmlregexfile-io

Is it possible to use JavaScript to forcefully transition a CSS keyframe animation to its end state?

One dilemma I am facing involves CSS keyframe animations triggered by scroll behavior. When users scroll too quickly, I would like JavaScript to help send some of the animations to their 'finished/final' state, especially since the animations bui ...

javascriptcssanimationkeyframe

What is the reason behind LESS displaying arithmetic operations as text instead of performing them?

Whilst composing the subsequent operations @a: 2px @variable: @a + 5; .margin-style{ margin-left: @variable; } The code above compiles into .margin-style{ margin-left: 2px + 5; } Rather than margin-left:7px; What could be causing this issue? ...

htmlcssless

Save an HTML5 canvas element as a picture using JavaScript and specify the file extension

Is there a way to save an Html5 canvas element as an image file using Javascript? I've tried using the CanvasToImage library, but it doesn't seem to work for this purpose. You can view my current code on JsFiddle. <div id="canvas_container" ...

javascriptjqueryhtmlcanvas

The link does not respond to the first click

I'm having an issue with the search feature on my website. The page includes an auto-focused text input element. As the user types, an ajax request is made and JQuery fills a div with search results. Each result is represented by an <li> elemen ...

javascriptjqueryhtml

Align text vertically next to an image

I am facing a challenge with aligning text vertically next to an image floated left. I have tried various solutions recommended on different platforms, but none seem to work for me. Despite following the suggestions provided in this particular solution, I ...

htmlcss

Having trouble with Jquery's Scroll to Div feature?

When I click on the image (class = 'scrollTo'), I want the page to scroll down to the next div (second-container). I've tried searching for a solution but nothing seems to work. Whenever I click, the page just refreshes. Any help would be gr ...

javascriptjqueryhtmlcss

When a button is clicked in (Angular), it will trigger the highlighting of another button as a result of a value being modified in an array. Want to know the

Currently in the process of developing a website with Angular, I've encountered an unusual bug. The issue arises when using an *ngFor div to generate twelve buttons. <div *ngFor = "let color of colors; let i = index" style = "display ...

htmlangulartypescriptbuttonclick

Is there a way to turn off vue.js transitions specifically for testing purposes?

I'm utilizing a vue.js component with the <transition> element for show/hide animations. However, I want to disable the animation for faster testing. How can I achieve this? The solution proposed is * { transition: none !important } in this lin ...

javascriptcssanimationvue.jsvuejs2

My experience with jquery addClass and removeClass functions has not been as smooth as I had hoped

I have a series of tables each separated by div tags. Whenever a user clicks on a letter, I want to display only the relevant div tag contents. This can be achieved using the following jQuery code: $(".expand_button").on("click", function() { $(th ...

javascriptjqueryhtmlcss