I am trying to use Tabler icons in my project React typescript project via classNames and for some unknown reasons, some icons appear filled. Please note that my CSS skills are not so good.
The library comes with
Font icons
PNG icons
And SVG icons
When I check the font icons some icons appear completely filled and because of this when I try to access them like className="ti ti-discount" I get icons that look like while the SVG and PNG counterparts look like , am confused, how can I resolve this?
For anyone who sees this question, the poster created a GitHub issue here: https://github.com/tabler/tabler-icons/issues/102. According to the project's maintainer, the problem should be solved in the near future (I'd guess early 2021): https://github.com/tabler/tabler-icons/pull/92.
Related
So, I have a problem and am not sure where to start. I am working static site project
built using nuxt, vue, and vuetify. Everything works great and looks good, until I run nuxt generate. After that when I go to view the final static site, I lose my styling on my font-awesome icons. The first image below is what I have when running on my localhost.
In the photo, you can see the size of the magnifying glass and star. This is perfect. However, the next photo is after I run nuxt generate
I am at a loss here as to what would be causing this, and any direction would be greatly appreciated.
EDIT
After looking at the devtools again from a comment, the icons have the same CSS styles, and I do not see a difference. However, further back in the elements I have a div that is getting rendered differently, which could be breaking things.
The CSS circled at the top is my local environment. You can see that .evidenceReview{} has the active background, which is overriding .theme--light.v-card{}.
In the bottom circled CSS is what I get from my deployment. Here you can see that the same classes exist, it's just that the presence is switched and .theme--light.v-card{} is overriding .evidenceReview{}.
As workaround, importing the font-awesome css at the top of my css file worked.
#import '#fortawesome/fontawesome-svg-core/styles.css';
Workaround taken from FontAwesome GitHub issue:
https://github.com/FortAwesome/Font-Awesome/issues/18666#issuecomment-1090686913
This question already has answers here:
Font Awesome 5 - why aren't icons like bitcoin, facebook, twitter showing?
(4 answers)
Closed 2 years ago.
Font Awesome has awesome for me for quite a while. However, I noticed that recently there's been a bit of a change and I haven't been successful in adjusting. Specifically, the fa class has been deprecated, according to what I read on the fontawesome site. Now we are supposed to use fab for projects like mine. Unfortunately, fab won't load. fa will still load just fine, but not for all the icons, just some of the icons.
Please see here, upper right corner: https://circularsmc.nationbuilder.com/
Twitter and Facebook are using the old fa class and they are loading.
Instagram is not loading using the new fab class. I tried it again next to it using the old fa class, but that's not working, either. (both are there, right next to each other, for reference).
I'm a bit flummoxed. Any idea what I'm doing wrong? I checked the Support page but it doesn't look like this issue is there.
While using fontawesome, you need to be aware of the different style sheets used by this library.
1-fas for solid
2-far for regular
3-fal for light
4- fab for brand
All of these style sheets beside the original fa style one. So, if your fa icons are working and fab is not, then you have to make sure that you have linked the fab style sheet either by downloading it locally inside your project or adding its cdn link to you html file.
Follow this link to use fontawesome cdn links of any style that you need
I hope this is informative for you
I downloaded a free css theme and this theme uses css file and font files for icons and unfortunately the theme has no documentation. How can I visually export them to an html file instead of looking at the CSS file line by line?
https://yadi.sk/d/K1fgjd61wWCy8Q
https://yadi.sk/d/j3tjDtwa3Gucng
https://yadi.sk/d/QCi26iPmPE5QIA
https://yadi.sk/d/POI-p5eOsmQArQ
https://yadi.sk/d/tKJY9lGomWsqmg
It was obviously created through icomoon, but I want to see visually which icons are there.
Just to clarify, you wanted to have a preview of the icons, right? That's why you're asking to convert it to HTML to easily view in the browser. If so, I hope this would do:
With the use of your .SVG file (https://yadi.sk/d/tKJY9lGomWsqmg), you can upload this to https://icomoon.io/. There, you can have a preview of the available icons with their corresponding names.
IcoMoon App has a feature of converting .SVG to icons. And with that, it also offers to have a preview of the icons with their names.
I tried opening the .SVG on itself, but (I'm not an expert here) I didn't get to have a preview of the icons.
I hope that helps.
I have converted material svg as font icons in my project using GULP, similar to custom icon fonts. Occasionaly, these font-icons are appearing jumbled/empty and on refresh, all icons are arranged properly in the site.
Example: instagram icon instead of apple icon
This happens occasionally and only in published site, why is it happening like this and how to solve this?
Note: After adding text-rendering:optimizeLegibility; in font css , this issue started.
Thanks
lately I've been trying to find a sprite sheet similar to bootstrap's but with emotion icons only (smiley face, sad face, etc), but can't seem to find one. Does anyone know of one with the css that goes along with it?
Sure, try IcoMoon App
then check put the IcoMoon Free font, it has quite a bunch of emoticon fonts.
Otherwise, you can download some free emoticon package, convert the images to SVG and then import into IcoMoon App, then the app will create your font set with CSS included