Stacking the FontAwesome icons on a PrimeNG button

I've been experimenting with various methods to incorporate stacked icons on a pButton in Primeng, but I haven't had any success. Does anyone have a solution that doesn't result in the button being twice its normal height?

Here are a couple of attempts I've made:

<button pButton type="button" icon="fa fa-stack fa-download fa-ban fa-stack-1x" iconPos="left" label="no download"></button>

and

<button pButton type="button">
    <span class="fa-stack"><i class="fa fa-download fa-stack-1x"></i><i class="fa fa-ban fa-stack-1x" style="color:tomato"></i></span> no download
</button>

Unfortunately, neither of these approaches is giving me the desired outcome.

To better illustrate my issue, here's what I'm aiming for https://i.sstatic.net/0Go4B.png, compared to what I'm actually getting https://i.sstatic.net/i3Cdt.png.

cssfont-awesomeprimeng

Answer №1

One possible solution is to add the attribute aria-hidden="true" to the <i> tags. This way, the icons will be hidden from screen readers but still visible on the webpage:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<button pButton class="btn btn-default" type="button">
  <i class="fa fa-download" aria-hidden="true"></i>
  <i class="fa fa-ban" aria-hidden="true"></i>
</button>

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

Determine the number of rows in the Tabulator's table

Can anyone tell me how to retrieve the number of rows in a table created using Tabulator on a website? Is there a method like table.size or table.length that I can use for this purpose? The table has been initialized with the following code: table = new T ...

javascripthtmlcssjsontabulator

What is the best way to make sure that the parent div of an svg shows its shadow on top of the svg itself?

I am in the process of creating an interactive world map using an SVG map. The SVG format is necessary because I have implemented functionality to zoom in and move the map around. However, a challenge has arisen: the SVG element is obstructing the shadow o ...

htmlcsssvg

Is there a way to make a Bootstrap grid with four columns span across two rows in the second column?

How can I create a Bootstrap grid with four columns where the second column spans two rows? Hello, I am looking for help to achieve a portfolio grid layout with 4 columns (refer image here) and have the second column span 2 rows. I plan to include images ...

jqueryhtmlcsstwitter-bootstrapportfolio

Is there a way to dynamically change select2 styling using code when a form is submitted?

Having trouble highlighting empty select2 selects when a form is submitted? I'm struggling to override my existing CSS styling upon document load. Check out my jQuery attempt: var $requiredUnfilledItems = $(".required:not(.filled)"); if ($requiredUn ...

jquerycsscss-selectorsjquery-select2

Creating a text design that spans two lines using Scalable Vector Graphics (SVG

I am working with an SVG that displays strings pulled from an Array... {"label":"Here is an example of the string...", "value":4}, The text above is shown in an SVG element as... <text>Here is an example of the string...<text> I would like ...

javascriptjquerycsssvg

Guide on keeping a footer anchored at the bottom of a webpage

I have gone through numerous tutorials on how to position the footer at the bottom of my webpage, but I'm still struggling to accomplish it for my own site. Some of the resources I've consulted include: Understanding techniques to keep the fo ...

htmlcssfooter

Lines are showing up on the screen, but their origin within the html or css remains a

While creating my website, I encountered a minor issue. Some elements like div or text element are showing lines when hovered over with the mouse, but they disappear once clicked elsewhere. Surprisingly, there is no border defined for them. I am stuck at ...

htmlcssbootstrap-4

Exploring the art of styling in Angular6

I am looking to change the text color when a specific ID is clicked <nav class="navbar "> <ul class="navbar-nav"> <li *ngFor="let item of items"> <a class="nav-link" >{{item.title}}</a> ...

cssangularhtml

What steps can I take to create a responsive jQuery UI buttonset?

I am currently facing a challenge with my web app (http://www.tntech.edu/cafe-menu.php) which is being iframed into a mobile application developed by ATT. The button sizes vary on different phone models, and I am seeking a solution to make them responsiv ...

jqueryhtmlcssjquery-ui

CSS :hover problem, text appearing unexpectedly

I'm currently working on designing a logo that displays hidden text when hovered over, providing instructions to users. However, I've encountered an issue where the hidden text reveals itself even before the logo is hovered over. This is frustrat ...

htmlcsshover

Animation issue in Material UI autocomplete label feature

Hello, I am currently delving into the world of React and Material UI. I have been working on implementing the Material UI auto complete feature with chip functionality. You can see my progress here: https://codesandbox.io/s/runh6. Everything seems to be w ...

javascriptcssreactjsautocompletematerial-ui

Using Google Maps within a Bootstrap modal window that is only partially loaded

The maps display perfectly fine in a regular div, but when placed inside a Bootstrap modal, only half or part of the map is visible. However, when I open the console, the issue resolves itself and the entire map is shown. Photo without console opened Pho ...

htmlcssgoogle-mapstwitter-bootstrap

Adjust Font Size inside Circular Shape using CSS/jQuery

I have been searching for different libraries that can resize text based on the size of a container. However, my container is circular and I am facing difficulty in preventing the text from overflowing beyond the border. Below you will find a Fiddle conta ...

htmlcss

Is there a way to exclude the Unicode character from the first menu item while still utilizing it in the other items on my menu?

I have been working on customizing my menu by using the unicode character \25C6 to represent a black solid diamond as a spacer between labels. After searching for solutions on Stack Overflow, I attempted to implement the suggested method using the bef ...

csswordpressmenuicons

Understanding the concept of for loops in JavaScript and incorporating them in CSS styling

Hello there! I initially used this code to draw 12 lines, but now I am looking to incorporate a for loop and implement it in CSS. Can someone please guide me on how to proceed? <!DOCTYPE html> <html> <head> <style> #straigh ...

javascripthtmlcss

@page Css not displaying properly on the Mozilla Firefox browser

In order to fulfill my requirement, I need to ensure that there is a consistent 10cm margin on all pages when printing. Printing on my web page involves utilizing the window.print() function. However, due to the dynamic nature of the content, the number o ...

cssasp.net-mvcprinting

Avoid having the java applet destroyed when the container is hidden

I am working with multiple DIVs, each containing text, a java applet (unfortunately...) and buttons. I am currently creating a search function to dynamically show and hide these DIVs. However, whenever I use display:none on a DIV, the applet inside it se ...

javajavascripthtmlcssapplet

I'm baffled by this unsemantic grid - why is the final div getting pushed below the rest?

I am working with the unsemantic fluid grid system and aiming to create a row of divs that are all in line and together cover 100% of the page. <div class="grid-container"> <div class="grid-parent yy name-strip zz"> <div class="yello ...

htmlcssfluid-layout

Utilizing CSS for a specific row within the grid-template-areas placement

Hey there, I'm diving into the world of coding and taking on a new project as a beginner. My goal is to recreate Google's Advanced Search page from scratch. Right now, I'm focusing on creating the header section using the power of display: g ...

htmlcsscss-grid

Issue arises when applying both overflow-x:scroll and justify-content:center

Encountering a problem with using overflow-x: scroll and justify-content: center on a flex parent container. Here is my code snippet: The issue: the first flex child item is not visible as it is cropped on the left side. Please refer to the screenshot and ...

htmlcssflexbox