I'm using jQuery SVG Plugin to work with SVG on client (web browser) side.
At an specific situation, I have to add an FontAwesome icon to the SVG.
FontAwesome icons on SVG works well, normally, if they are part of the origin SVG, which is loaded by the jQuery SVG plugin.
The problem appears by adding icons dynamic with the following line, where mainSVG is the global SVG object.
mainSVG.text(null, x, y, '&#'+iconCode);
Where iconCode is something like "xf007"
...followed by adding some position and style attributes.
Adding the text element to the svg works fine.
The result is a string '', which is added insight an text-object which is now part of to the svg.
<text x="49" y="139" style="font-family: FontAwesome;
font-weight: normal; font-size: 6px;" class="dot">

</text>
But: it's shown as an string and not as an icon. By the way: the css style definition for the FontAwesome is loaded and known insight the SVG.
The thing is: if I modify the SVG using firebug for an very tiny change (like adding an blank between to SVG elements), the icon become visibly.
For me this is a very strange behaviour an it looks like, the browser simply doesn't notice new added icon. Or: the browser notice the new added icon only after making some tiny change on the svg object using firebug.
So my question is: how can I add dynamic FontAwesome icons to an svg using jQuery or how can I trigger the browser / svg "viewer" plugin to notice the icon in order to display the icon by using the existing css definition?
Related
I notice that in my CSS file, there are some rules which uses Font Awesome Web font, as below:
ul.fancy li:before, .category-page ul li:before {
display: none;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f0da";
}
Now I want to replace it with SVG icon or SVG Sprites from Font Awesome. Since Fontawesome icon allows to be used in both Web Font or SVG icon, its CSS Pseudo-elements should also support all these methods too. Just wonder how to do so? I check the Font Awesome website and cannot find the corresponding document on such a case.
Web fonts were really a great idea and a very useful one for you to have responsive un styled icons for web development. But right now it's not that too much good idea since every major browser supports the svg standard it makes no sense to install, or call via CDN a web font which is consuming resources for you to use, how many, ten icons on your app or web site?
So, for example, the last version of font awesome comes with a src folder in which there are all the icons on svg format.
Said that, there is another easy way for you to grab the icon from within the font and turn it into a svg. Let's say you have installed the font to your system. Then you download the cheat sheet of the font and open it on the browser, look for the selectable version of the icon you want and select it and copy. Then you open Inkscape and get the text tool and paste the selected icon. Look in the font selector for the font and apply it to the icon you just copied as text. Then convert the text into a path and save it as svg.
The next step is to create a css system to place the icons instead of the font icons. As long as I have done you should be able to use the system that was created in the framework for the use of font awasome. Just open the font css and look for the general stiling, I mean, the classes i, icon, mainly and paste them into your css file.
Now you try this, replace the font in the code that you provide with a background and the url of your icon.
Of course, it will be useful just for one icon
If you want more you should create yourself a similar system like the one the css of the font uses.
In my case I have created a class prefix simbicon-xxxx where the xxx stands for the name of the icon. I will show you now.
CSS
.simbicon-logout {background: url('../img/logout.svg') center no-repeat;bottom: 0;width: 36px;height: 36px;}
HTML
<i class="icon simbicon-logout"></i>
And the few icons that I actually use on the proyect get displayed exactly as the font icons did.
One caveat of this method is that the font icons comes with no fill attribute so they get the custom color of the theme. With this system you have to place a fill inside each svg icon.
Notice that the "\f0da"; in your css refers to the specific icon to be displayed from the font. In the cheat sheet appears an image of the icon, this code above and a selectable icon. That last is the one you need to select to copy as text inside Inkscape.
In the image above are shown the css class of the icon, the acssi reference and the selectable which is inside the red circle.
Sorry for the typos but I am on my mobile now and I have no glasses here.
I am working with Vue.js and try to place some SVG Icons I made in Illustrator for my Webapp. I loaded the icons with Webpacks "require". It is not possible to access the svg's with their source (src attribute of img tag) so we insert them with vue like that:
<div class="section-icon" v-html="getIconForEvent(event)"></div>
This displays the right icons at the right place, but I ran into some problems with this approach.
The SVGs are all styled with a style-tag within the svgs. So the last SVG overwrites the style of all previous SVGs because they somehow all have the same class. In the Chrome Devtools this looks like
this.
What can I do to not let the style of SVGs overwrite each others classes? I didnt put the style tags there myself, those are just the style that the SVG had itself. Thanks!
There is nothing you can do other than modifying the class names in each SVG so that they don't clash.
It looks like you are using Illustrator to produce those SVGs. To work around the problem, make sure you tell Illustrator, when you save the SVG, to not use <style> elements for element styling.
When you save, use File > Save As > SVG, then click on "More Options" and change the "CSS Properties" setting. If it is set to "Style Elements", change it to one of the other options. If you do that, it won't use classes and your SVGs won't clash with one another.
To fix your current SVGs, you should be able to load them in, then resave them using the method above.
Try targeting them via CSS using children:
.cls-3:first-child {
fill:yellow;
}
.cls-3:nth-child(2) {
fill:red;
}
...
.cls-3:last-child {
fill:blue;
}
Fill with what colors you need to see if it works. If that does not overwrite it, you may need to use !important, although it is not a best practice, rather a worst case scenario.
I want to add a glassdoor icon. You can find my site at braunweiss.net. My theme uses fontawesome and it currently doesn't support a glassdoor icon. So I tried adding an image in place using the below code:
.social-menu li a[href*="glassdoor.com"]::before {content:url(http://braunweiss.net/wp-content/uploads/2017/07/glassdoor-2-1.png);}
However, it looks bad, it's not customizable, and it doesn't change when it is hovered like a font. I've read of using svg in inline css but cannot figure out how to do it. Here's where I got the glassdoor icon I used: https://materialdesignicons.com/ (scroll down, the icons are in alphabetical order).
Is there a better way to get the icon to show up? I can only customize css or add codes to my theme's php files on wordpress. Thanks.
Have you tried using an SVG?
https://github.com/FortAwesome/Font-Awesome/issues/6422 (SVG LINK IS IN HERE)
https://css-tricks.com/using-svg/ Icon SVG how-to.
I'm using an icon font and everything works so far as the icons show up in the interface as they should. I'm creating the file via Sass using the .scss format.
I noticed when I inspect an element to view it's CSS properties in the code inspector, or view the style sheet via the code inspector, or just open the .css file in my text editor, it shows the Unicode character of the icon glyph as follows:
.icon-alert::before {
content: "" !important;
}
What causes the little box with the question mark instead of what's actually written in the .scss file: \e669
How can I fix this?
I cannot mark this duplicate yet but there are existing posts around this topic. You have to create a function to workaround a known bug:
Sass: unicode escape is not preserved in .css file
https://github.com/sass/sass/issues/1395
I found the following HTML code
<i data-toggle="tooltip" class="icon-ok-sign" data-original-title="File not detected"></i>
on https://www.virustotal.com/en/file/9d72e0523cc6bd4baa1bd88967aec1402551a5d565703b799ce6be52ec1a7640/analysis/
Why they are using <i>?
How to get path for the "icon-ok-sign" icon?
How can I find out the icon path with the Chrome browser menu item "Inspect Element"?
They are using bootstap as their framework.
Bootstrap includes an icon pack called glyphicons. It's a sprite file, and has these icons in: http://twitter.github.io/bootstrap/base-css.html#icons.
In this site they are using an icon font, the popular Font Awesome.
The icons are in the font, rather than as images, which has many advantages.
The reason they use the i tag, is because Bootstrap decides to use that to represent an icon. Personally I don't really like that – i = italic, but on the other hand, its a purely stylistic tag and isn't really used anyway. (em should be used for emphasis, not i).
The tooltip stuff is also from Bootstrap and the documentation is here.