Get image of icon from css in a Angular app - css

how can I retrieve the image of an icon from the given css below? (see the pic)
This icon is in a 3th party npm lib in an angular application, but I cant find any trace of this image by finding svg, png, jpg file or finding by 'music' keyword under the node_modules dir ... no any help just content: "\e94e"
Thanks for the answers in advance.
Csaba

Related

Fonts and background image with tailwind, not detected in export next js export

Hello I'm using tailwind css in my Next project and set local fonts, background image for pages, but when I export project and generated HTML and css files, HTML can't find fonts and background image. After reviewing generated css file I noticed it's url was incomplete and doesn't start with ./ signs. The generated addresses is as follows:
_next/static/media/iransans.1a37d2b9.ttf
_next/static/media/bg.aa581a5c.png

Some Tabler font icons appearing filled

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.

Generate content code from Icon s pack - CSS

I have downloaded a simple template from the internet and for icons, the developer used Flaticons font. Now I want to put another icon on the website but I can't get Flaticons code for CSS file. On Flaticon site only can be downloaded in PSD, SVG, BASE 64 I don't have code like .flaticon-research:before { content: "\f100"; }. How to get that? Is there any solution to convert SVG file to get that content or how? I don't want to download every single SVG file and from the SVG file get the icon. I want to use the above example method. Any help will be welcome. Thanks all
follow the instruction here https://www.flaticon.com/iconfonts
after downloading the font you will see multiple files show you how to use your icons depending on you using css or scss

How to map the icons from the CSS file?

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.

Custom background icon for dashing widget

I am making Dashing widget to show statistics from Jenkins CI server.
I want to set Jenkins logo icon as a widget background icon. For the moment Jenkins logo icon is not included into official Font Awesome(https://github.com/FortAwesome/Font-Awesome/issues/3714, https://github.com/FortAwesome/Font-Awesome/issues/1529).
Dashing framework is flexible and I assume there must be a solution to set a custom icon as a widget background. But for now I cannot solve the issue on my own.
Has anyone come across this?
The following code from the Bamboo widget will likely do the trick. This is only needed in the scss file, there shouldn't be anything else special needed (other than having the file in the correct location for the scss to find it!)
.widget-bamboo-build {
background: url("/assets/bamboo-logo.png") no-repeat center;
This line is right at the top of the widget section in the scss file. I've included the .widget-bamboo-build line to indicate that.
So this line looks in the Dashing applications home directory for a folder called 'assets' and then tries to find 'bamboo-logo.png' in that folder.
Hope this helps :)

Resources