The font awesome 4 code generates these SVGs which are not target-able with typical CSS, which sucks, and breaks my entire codebase.
In the past, you could make an <i> tag, and style it like everything else, but now that these SVGs get generated in the DOM, you can't use text-align or margin, etc.
I've tried wrapping the icons in divs, but this is still limited and cannot affect the icon itself when it comes to alignment within the div.
So this:
<div class="tradeoff-cell">
<span class="tradeoff-title">Lower Cap</span>
<div class="tradeoff-icon">
<i class="fa fa-bar-chart" aria-hidden="true"></i>
</div>
</div>
Becomes this:
<div class="tradeoff-cell">
<span class="tradeoff-title">Lower RL Rate</span>
<div class="tradeoff-icon"><svg class="svg-inline--fa fa-chart-line fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="chart-line" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M500 384c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v308h436zM456 96H344c-21.4 0-32.1 25.9-17 41l32.9 32.9-72 72.9-55.6-55.6c-4.7-4.7-12.2-4.7-16.9 0L96.4 305c-4.7 4.6-4.8 12.2-.2 16.9l28.5 29.4c4.7 4.8 12.4 4.9 17.1.1l82.1-82.1 55.5 55.5c4.7 4.7 12.3 4.7 17 0l109.2-109.2L439 249c15.1 15.1 41 4.4 41-17V120c0-13.3-10.7-24-24-24z"></path></svg><!-- <i class="fa fa-line-chart" aria-hidden="true"></i> -->
</div>
</div>
Related
I want to add the TikTok icon from font awesome v5. I am currently developing an application with Odoo in which the v4 of font awesome is already integrated. In v4 the TikTok icon does not exist. Can anyone give me an idea of how I can make my own icon without importing the whole v5 library?
I don't know Odoo but try adding this to your code:
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="tiktok" class="svg-inline--fa fa-tiktok fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"></path></svg>
I'm using TailwindCSS and want to change the color of an svg. Without Tailwind this question has been asked before here, for 2020 this should be a good answer but Tailwind does not support those filters. There is a guide in the docs on how to work with svg icons but this tutorial works without files, just the plain text paths.
I downloaded the svg files and assign the path to the svg to the image's src tag. The following example shows my problem, I want the icon's background to be red and the icon's color to be blue. Unfortunately it's not possible for me to change the icon color.
<link href="https://unpkg.com/tailwindcss#1.8.10/dist/tailwind.min.css" rel="stylesheet" />
<!-- taken from here https://www.iconfinder.com/icons/765208/media_twitter_social_icon -->
<img class="fill-current bg-red-500 text-blue-500" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI2MHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA2MCA2MCIgd2lkdGg9IjYwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iYmxhY2siIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIj48ZyBpZD0ic2xpY2UiLz48ZyBmaWxsPSIjMDAwMDAwIiBpZD0idHdpdHRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMuMDAwMDAwLCAxNi4wMDAwMDApIj48cGF0aCBkPSJNMjguMDUyMTM4NSwyLjQzNjY5NDI3IEMyNi44NDMxODQ2LDEuMDYyMjAxNSAyNS4xMjA1Mzg1LDAuMTg2NDY0MTA1IDIzLjIxNDA2MTUsMC4xNTQ3MzEwMjggQzE5LjU1MzYsMC4wOTM4MDMwOTA1IDE2LjU4NTY1MzgsMy4xODY5MjMzOSAxNi41ODU2NTM4LDcuMDYzMTE2MDQgQzE2LjU4NTY1MzgsNy42MTMyNDExOCAxNi42NDQyOTIzLDguMTQ5NjkzMzcgMTYuNzU3MzY5Miw4LjY2NDY3MzE2IEMxMS4yNDg1ODQ2LDguMzA3MzUyNTcgNi4zNjQ0NjkyMyw1LjQzODc3MDU5IDMuMDk1NDE1MzgsMS4xMTQ3MjE4IEMyLjUyNDg2MTU0LDIuMTUwODYxNyAyLjE5NzkwNzY5LDMuMzYxODgyNzEgMi4xOTc5MDc2OSw0LjY1OTE1MDM3IEMyLjE5NzkwNzY5LDcuMTE0OTg4NDQgMy4zNjgwOTIzMSw5LjI5NDUyNzI0IDUuMTQ2NjMwNzcsMTAuNTgxNDE3NCBDNC4wNjAxMjMwOCwxMC41MzM0NDk5IDMuMDM4MDY5MjMsMTAuMjA0NTM3OCAyLjE0NDQzODQ2LDkuNjY0OTUyMDMgQzIuMTQzNzkyMzEsOS42OTQ0NDQ5NyAyLjE0Mzc5MjMxLDkuNzIzOTQ0OTQgMi4xNDM3OTIzMSw5Ljc1Mzk2MjQ1IEMyLjE0Mzc5MjMxLDEzLjE4MzU0OTcgNC40Mjg1OTIzMSwxNi4wNjA3MDc2IDcuNDYwODMwNzcsMTYuNzMwOTM4MyBDNi45MDQ2NTM4NSwxNi44ODg1MzggNi4zMTkwNzY5MiwxNi45NzEwMTYzIDUuNzE0NiwxNi45NjcwMDggQzUuMjg3NDkyMzEsMTYuOTY0MTc1OCA0Ljg3MjE3NjkyLDE2LjkxNjgxMTggNC40Njc1MjMwOCwxNi44MzE3NjggQzUuMzEwOTE1MzgsMTkuNjQ0Mzc3NyA3Ljc1ODcwNzY5LDIxLjY5Njc2NjMgMTAuNjU5MjkyMywyMS43NjQ2MjggQzguMzkwODA3NjksMjMuNjQ3Njk2MyA1LjUzMjg2OTIzLDI0Ljc2OTE5MzMgMi40MjcyOTIzMSwyNC43NjI3ODcgQzEuODkyMjc2OTIsMjQuNzYxNjgzMyAxLjM2NDY5MjMxLDI0LjcyNzExMiAwLjg0NjE1Mzg0NiwyNC42NjA1OTk2IEMzLjc3OTUzMDc3LDI2LjY3MzMxMzkgNy4yNjM1OTIzMSwyNy44NDUxNzExIDExLjAwNjc2MTUsMjcuODQ2MTUzMSBDMjMuMTk4NTUzOCwyNy44NDkzNTE4IDI5Ljg2NTczMDgsMTcuMjM5NTEwOSAyOS44NjU3MzA4LDguMDM2NzY4NjggQzI5Ljg2NTczMDgsNy43MzQ4MzYzMiAyOS44NTkxMDc3LDcuNDM0NTE5MTIgMjkuODQ2NTA3Nyw3LjEzNTY1MTk1IEMzMS4xNDE1NjE1LDYuMTcwNjY2NDUgMzIuMjY1MjIzMSw0Ljk2MDc4OTE1IDMzLjE1Mzg0NjIsMy41NzkyMTkwMSBDMzEuOTY1MjQ2Miw0LjExNTAxNjE1IDMwLjY4NzYzODUsNC40NzA4Njg2MyAyOS4zNDcwMzA4LDQuNjIwMTM3ODkgQzMwLjcxNTQyMzEsMy43Nzc5NjUxOCAzMS43NjY1NTM4LDIuNDMwMDk2MDcgMzIuMjYxMzQ2MiwwLjgxMzc1ODQwNCBDMzAuOTgwNTA3NywxLjU5MDQ5MjI5IDI5LjU2MjAzODUsMi4xNDc1MTI4NiAyOC4wNTIxMzg1LDIuNDM2Njk0MjcgWiIvPjwvZz48L2c+PC9zdmc+">
What is the correct workflow when downloading svg icons and use them directly by linking the assets path? All I want to achieve is something like this
<a href="https://twitter.com" target="_blank">
<img src="pathToSvgInAssetsFolder" />
</a>
and set the icon color to a custom Tailwind color e.g. red-500. So whenever I want to change the icon color I can simply modify the color class.
Does someone know how to do it?
The workflow for adding SVG to your Tailwind project should be done using inline SVG.
Adam Watham the creator of Tailwind CSS made a video about working with inline SVG in Tailwind. In the video he shows a workflow you would use to prep an unoptimized SVG for a Tailwind project. Here's the steps with one extra step he didn't mention:
Drop the SVG file or paste the SVG markup into the optimizer at SVGOMG.
Copy the markup provided by SVGOMG and paste into your project.
Remove any fill or stroke attributes so Tailwind can modify those with classes (not shown in the video).
Remove any XMLNS attributes or XML tags, these are not needed for inline SVG.
Add Tailwind classes.
If you're using a component based framework it's recommended that you also extract the icons into components that can be reused throughout your application.
The benefits of this approach:
Full control over the size and color of your SVG icons
Faster load speed since the icons are part of the HTML
Here's an example based on the Fiddle you shared in the comments. I ran the SVGs through SVGOMG and removed the fill attributes so Tailwind can control that.
<link href="https://unpkg.com/tailwindcss#1.8.10/dist/tailwind.min.css" rel="stylesheet" />
<svg class="text-teal-500 fill-current h-16 w-16" viewBox="0 0 60 60">
<path d="M41.05 18.44a6.6 6.6 0 00-4.84-2.29c-3.66-.06-6.62 3.04-6.62 6.91 0 .55.05 1.09.17 1.6a18.68 18.68 0 01-13.66-7.55 7.33 7.33 0 00-.9 3.55 7.3 7.3 0 002.95 5.92 6.34 6.34 0 01-3-.92v.1c0 3.42 2.28 6.3 5.31 6.97a6.24 6.24 0 01-3 .1 6.74 6.74 0 006.2 4.93 12.8 12.8 0 01-9.81 2.9A17.89 17.89 0 0024 43.85c12.19 0 18.86-10.61 18.86-19.81l-.02-.9c1.3-.97 2.42-2.18 3.3-3.56-1.18.54-2.46.9-3.8 1.04a6.8 6.8 0 002.91-3.8c-1.28.77-2.7 1.33-4.2 1.62z"/>
</svg>
<svg class="bg-red-500 text-red-800 fill-current h-16 w-16 rounded-lg" viewBox="0 0 60 60">
<path d="M25.46 47.31V30h-3.52v-5.74h3.52v-3.47c0-4.68 1.4-8.06 6.53-8.06h6.1v5.73h-4.3c-2.15 0-2.64 1.43-2.64 2.92v2.88h6.62l-.9 5.74h-5.72V47.3h-5.69z"/>
</svg>
In simple terms use text-<color> and fill-current
<svg class="h-16 w-16 rounded-full bg-cyan-400 fill-current text-white" viewBox="0 0 60 60">
<path d="M25.46 47.31V30h-3.52v-5.74h3.52v-3.47c0-4.68 1.4-8.06 6.53-8.06h6.1v5.73h-4.3c-2.15 0-2.64 1.43-2.64 2.92v2.88h6.62l-.9 5.74h-5.72V47.3h-5.69z" />
</svg>
Output:
I am new to HTML and stuff and I would like to insert a SVG into a button. I tried using <object> but the SVG is invisible. Any suggestions what I could do to make it visible and fit inside the box?
There are a few different approaches. Possibly the easiest way to include an SVG is using an <img> tag, like you would for any other image type:
<button>
<img src="https://api.iconify.design/ic-baseline-face.svg?height=24" aria-hidden="true">
Smile
</button>
In this case, the size of the SVG we're importing is about right, but if it wasn't it might be more difficult to size it how you like, because you have two elements rather than one to think about. In that case, a good alternative is to set it as a background in CSS instead:
.my-button {
width: 3em;
height: 3em;
background: url("https://api.iconify.design/ic-baseline-face.svg?height=24") center no-repeat;
}
<button class="my-button" aria-label="Smile"></button>
This approach is often used for icons, but note that in this method we have to specify a size (in this case using width and height in the CSS).
As a third option, you can include SVG source directly in HTML instead, which allows you to style it with CSS and manipulate it with JavaScript, but that's generally not very useful for button icons. For completeness, though you'd do it like this:
<button>
<!-- From https://material.io/tools/icons/?style=baseline -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"/>
<path fill="none" d="M0 0h24v24H0z"/>
</svg>
</button>
CSS-Tricks has a good article on all three methods.
I'm hoping someone can point out where my bug is with this little problem I have.
I can't resize one <symbol> from an external svg with CSS, but I can another <symbol> from the same external svg.
In the CSS I'm changing the width and height. Which #pluss handles fine, whereas #heart completely ignores it. It just wants to stay at 24px * 24px regardless of CSS sizing.
I can't tell what I'm doing differently. Headscratchingly confusing!
The external icons-defs.svg file:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="pluss" viewBox="0 0 24 24" aria-labeledby="title">
<title>Add</title>
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</symbol>
<symbol id="heart" viewbox="0 0 24 24" aria-labeledby="title">
<title>Favourite</title>
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</symbol>
</svg>
And in HTML:
<button>
<svg class="icon-heart" role="presentation">
<use xlink:href="icons-defs.svg#heart"></use>
</svg>
Like
</button>
<button>
<svg class="icon-pluss" role="presentation">
<use xlink:href="icons-defs.svg#pluss"></use>
</svg>
Add Goal
</button>
When having the same svg with symbols inline at top of the HTML document it works fine.
Any pointers would be much appreciated :)
#robert-longson wrote the solution in a comment, so I'm copy-pasting it here.
One symbol has a viewBox, one does not. SVG is case sensitive so viewbox is not a functional attribute. HTML is not case sensitive so it works inline when parsed by a HTML parser.
So changing viewbox to viewBox (capital B) fixed my bug.
I have an accordion which is written internally in our company. I am using this as part of new page. Now there is problem with it, which is consider as a bug/defect.
The screen reader jump when it reach to accordion codes. and goes to next element.
<h4 class="accordion-header ng-scope ng-click-active" data-ng-click="vm.toggle(0)">
ABCDEFGHIJKLM------ [By January 1, 2014]
<button class="accordion-arrow" data-index="0">
<svg version="1.1" class="svg-arrow-container" color-interpolation="auto" shape-rendering="auto" image-rendering="auto" text-rendering="auto" color-rendering="auto" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-157 170.1 83.5 61.9" style="enable-background:new -157 170.1 83.5 61.9;" xml:space="preserve">
<path class="st3 svg-arrow faq" d="M-77.2,204.8l-30.2-30.8c-0.3-0.3-0.5-0.6-0.8-0.9l-0.3-0.3c-3-2.9-7.5-3.5-11-1.7l0,0
c-0.2,0.1-0.3,0.2-0.5,0.3c-0.1,0.1-0.3,0.2-0.4,0.2l-0.1,0.1c-0.5,0.3-0.9,0.7-1.3,1.1l-0.4,0.3c-0.2,0.2-0.3,0.3-0.5,0.5
l-30.6,31.1c-3.7,3.7-3.6,9.8,0.1,13.4l0.3,0.3c3.7,3.7,9.8,3.6,13.4-0.1l24.3-24.5l24.2,24.6c3.7,3.7,9.7,3.8,13.4,0.1l0.3-0.3
C-73.6,214.5-73.5,208.5-77.2,204.8z"></path>
</svg>
</button>
</h4>
<div class="accordion-content medium" style="max-height: 330px;">
<div class="inner">
<p>
We will communicate with people with disabilities in ways that .....
</p>
</div>
</div>
I dont see any reason that screen reader pass this elements. Please suggest a solution that screen reader do not pass my accordion and reads its content.
How did you navigate with screen trader ?
Your button doesn't contain any text.
Ng-click on a non-focusable tag...
It's a start.