navigation bar icons alignment problem

Help with positioning an icon next to the navbar text

Example Code:

<ul>
    <li><a href="#" id="other-color" class="ui-btn ui-shadow ui-btn-icon-left ui-custom-icon ui-arrow ui-nodisc-icon">Set Filter</a></li>
    <li><a href="#" id="other-color" class="ui-btn ui-shadow ui-btn-icon-right ui-custom-icon ui-location ui-nodisc-icon">Add Page</a></li>
</ul>

CSS Styles:

.ui-arrow:after {
    content: '';
    background-image: url(icons/filled-filter-32.png);
    background-size: 15px 15px;
}

.ui-location:after {
    content: '';
    background-image: url(img/plus-32.png);
    background-size: 15px 20px;
}

I want the icons positioned directly next to the text without any additional spacing.

htmlcss

Answer №1

If you want to include an image before:

a.ui-arrow{ 
   display: inline-block;
   padding-left: 20px;
}

If you prefer to add an image after:

a.ui-location{ 
   display: inline-block;
   padding-right: 20px;
}

Adjust the padding according to your background image

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

The initial number is inserted within the text box upon entering the final number

Whenever I enter the final digit, the text-box swallows up the initial number (it vanishes), resulting in an additional space. https://i.stack.imgur.com/Vfm8s.png https://i.stack.imgur.com/od4bQ.png Upon clicking outside of the text-box, the formatting ...

javascriptjqueryhtmlcss

What is the best way to position a popup div in CSS?

Currently, I am in the process of developing a website that displays DVD details when hovering over an image, similar to what is shown in picture 1. However, I've encountered an issue where the content gets cut off for DVDs located on the right side o ...

javascripthtmlcss

What is the process for changing the color of my input fields to black and text to blue?

<form method="post" action="https://ip/form.php"> First name<br> <input type="text" name="fname" value=""><br> Email Address:<br> <input type="text" name="email" value=""><br> Phone: <br> <input type="text ...

htmlcss

The href link on Android and iPhone devices is not activating, instead showing a focus rectangle

I've encountered an issue with the responsive layout of my HTML5 site on Android and iPhone versions. The links on the site are behaving strangely - they only work if I hold them down for a full second. Otherwise, they act as if a hover event is trig ...

androidiphonehtmlresponsive-design

Remove inline CSS from HTML elements

Having a large HTML file structured like this: <div style="min-height: 32px; padding: 5px; width: 800px; margin: 50px auto; overflow: auto; font-size: 12px;" class="selectable clearfix selected_layer" id="wrap"> <div class="selectable" id="l1" st ...

javascriptjqueryhtmlcss

Misalignment of Font-awesome icons in the footer section

I've implemented a footer on my website. My goal is to have the icons centered both vertically and horizontally, with the colored area: Always positioned at the bottom of the screen No taller than the icons themselves Here's the code snippet: ...

htmlcssfooterfont-awesome

The navigation bar does not display the CSS when in the active state

I created a navigation bar in ReactJS and I need the tabs to stay highlighted when clicked, but the styles are not applying correctly. I have double-checked that the stylesheet is linked properly based on the Reactjs file structure. For reference, I used ...

javascripthtmlcssreactjsreact-bootstrap

Selecting radio buttons using Bootstrap and JavaScript

I'm interested in incorporating this bootstrap radio selection feature into my JavaScript code. For example, if option1 is true, I want to execute a specific action... How can I achieve this? <div class="alert alert-info" role="alert"> < ...

javascripthtmltwitter-bootstrap-3

Trouble getting custom CSS media queries to function properly alongside Bootstrap 3

I've encountered an issue while using bootstrap 3 with jquery UI to implement search and select fields for the user. The CSS code seems to be working fine on larger screens, but it's completely non-functional on smaller screens. I tried applying ...

jqueryhtmlcsstwitter-bootstrap

What is the best way to implement form fields that have varying validation patterns based on different conditions?

Currently, my focus is on developing a form that prompts the user to choose between "USA" or "International" via radio buttons. The input field for telephone numbers should then adapt its requirements based on the selected country - either a 10-digit US nu ...

javascripthtmlformsvalidation

Using a dynamic image source in an Ionic 3 background

I am using ngFor to display a list of posts, each of which should have a unique background image. The getBackgroundStyle function is responsible for extracting the URL of the image from the post array. <div class="singlePost" *ngFor="let post of da ...

javascriptcssangularionic2ionic3

Div element failing to scroll with excessive content

I'm currently working on a modal using Mui Modal and I've encountered an issue. Everything seems to be functioning correctly until I add more items to the cart. When the minHeight exceeds 500, it stops at 100vh and only displays 5 items, even if ...

cssreactjsmaterial-ui

Showing the image as a backdrop while scrolling through text

How can I create an effect that continuously displays the image while scrolling text in Internet Explorer without using position: sticky or position: fixed? var sticky = document.querySelector('.sticky-container'); var img = document.querySele ...

javascripthtmlcssanimation

Maximizing Efficiency: Utilizing a Single jQuery Function to Retrieve Specific Values

I have a webpage with select menus for choosing user type, minimum age, and maximum age. I want to select options and send values as an object array to ajax. Initially, the getAjax function is working when the page loads. However, it stops working when I c ...

javascriptjqueryhtmlajax

What is stopping me from utilizing ES6 template literals with the .css() method in my code?

I am currently working on a project where I need to dynamically create grid blocks and change the color of each block. I have been using jQuery and ES6 for this task, but I am facing an issue with dynamically changing the colors. Below is the snippet of m ...

javascriptjquerycssecmascript-6

How can I place a DOM element without relying on style properties?

Before diving in, let me provide some context. I am currently developing a visual element that operates similar to a spreadsheet. It features scrollable content areas in both directions, with axis indicators on the left and top that remain visible at all t ...

javascriptcssspreadsheet

Maintain the tab order for elements even when they are hidden

Check out this demonstration: http://jsfiddle.net/gLq2b/ <input value="0" /> <input id="test" value="1" /> <input value="2" /> By pressing the TAB key, it will cycle through the inputs in order. If an input is hidden when focused, press ...

javascriptjqueryhtml

Instant feedback from dynamically generated text boxes

As a Python developer, I am venturing into the realm of HTML. Currently, I am working on an internal tool that enables users to create directories for various projects. To achieve this, I have implemented a method for dynamically adding and removing text b ...

jqueryhtmlangularjs

The website is experiencing some trailing spaces and overflow issues

Currently, I am in the process of designing a portfolio page that utilizes a mix of flex and grid elements. However, during my development phase, I noticed a small gap of around 8 pixels on the left side of the page causing unevenness in the header section ...

htmlcssflexboxoverflowtrailing-whitespace

Can CSS3 be utilized to craft this specific shape?

Can CSS3 be used to create the shape I need? I came across this website http://css-tricks.com/examples/ShapesOfCSS/, but I am unsure if any of the shapes on that page can be customized to match the specific shape I have in mind. Thank you! ...

htmlcssshapescss-shapes