Vaadin Icons Svg Unicode value is a string literal - css

I am trying to use Vaadin Icons in our Vaadin application. I have the Vaadin-Icons.svg file. I want to use the angle-right icon but I find that the svg file has a string literal as unicode value. It looks like this
<glyph unicode="angle-right" d="M256 128h128l320 320-320 320h-128l320-320z" data-tags="angle-right" />
while i was expecting something like this
<glyph unicode="" d="M550.4 736l224-224h-774.4v-128h774.4l-224-224 89.6-89.6 384 377.6-384 377.6z" data-tags="arrow-right" />
How do I use it in the css file?

The unicode value works as a ligature. Not sure, but maybe you are looking for the font icon instead, which you can more easily use from CSS? SVG’s are more useful when used within HTML.

Related

How to make a new Icon in css?

I'm not sure whether the title is correct But I have a custom png file that I want to apply as an icon in an existing application. Because this is an existing application, I can't make too many changes in order to keep the consistency. The only thing that I have to do is by using icon tag.
<i class="icon name" />
I've tried to create a new class and set the background image.
.new-icon {
background-image: url("./img/icon.png")
}
After that I applied that class in an icon tag like
<i class="new-icon" />
But the image didn't show at all. What I should do?
You can use <img> tag for png files but if you want to create something that you use in <i> you should create your icons as a font file, I suggest you to use <img> tag.
You should design your icon as SVG, then you can make it web fonts from here: https://fontello.com/
You can not use png as an icon.

Is there a way to add CSS to a title element in a SVG file?

I am working on an SVG file that has a number of <path> tags. I also have a <title> tag for each of these <path> tags. I have text inside the <title> tag such that when I hover over the <path> element, it displays the text. However, the text is the default format, bland text with an ugly looking border box etc.
Is there a way where I can use CSS to modify the <title> tag so that it can look better?
This is what I have thus far:
<title>
Title Tag!!!
</title>
<path d="M696.393,-204.269C703.418,-219.592 708.202,-238.899 697,-252 671.205,-282.169 562.896,-290.806 492.399,-293.194" fill="none" stroke="green" stroke-width="3"></path>
Unfortunately this is browser element and you cannot style it.
If that helps you could make custom tooltip by yourself, look for example here.
Making custom tooltip will probably require some amendments in your code though.

Display UTF8 text with accents in AFRAME like á í ñ

When I try to use some spanish words in my interface of AFRAME project all characters with accent disapear:
<a-text id="menu-desc" value="Menú"
position="-0.18 -0.06 0.1"
height="1" width="1"
align="left" anchor="left"
baseline="bottom" ></a-text>
just display "Men" instead "Menú".
In the html page I try to add:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
with no effect. ¿how to display correctly that kind of characters?
I can't mark this as a duplicate, so i'll paste my anwser from here:
It's not as simple as adding the meta type, since a-text is not just displaying characters, it's rendering them in the engine.
So there are three ways I can think of:
1) The proper way: find or generate a font from a fontset containing those characters. The docs describe how to use custom fonts:
<a-entity text="text: Hello World; font: ../fonts/CustomFnt.fnt;
fontImage: ../fonts/CustomFnt.png"></a-entity>
But you need to have a font file + a .png grid with the font images.
The docs provide a link to a tool for generating fonts, as well as a tutorial.
2) check out Don McCurdy's custom font generator !
3) The workaround: You could make a transparent image containing Your text and put it on an <a-plane>, like I did here.

How to add an image in an xsl sytlesheet in a table cell

I am trying to add an image inside a table in XSL:FO, but the image is not reflecting in the PDF.
<fo:table-cell border-style="solid" border-color="black" border-width="0.4pt" number-columns-spanned="1" text-align="center" display-align="center">
<fo:block font-family="isocpeur" line-height="12pt" font-size="12pt" font-weight="bold" space-before.optimum="1.5pt" space-after.optimum="1.5pt" keep-together="always">
<fo:external-graphic
content-width="scale-down-to-fit"
content-height="scale-down-to-fit"
scaling="uniform"
src="src\com\createpdf\image\LOGO.png"/>
</fo:block>
</fo:table-cell>
You've specified a relative path. The FO processor evaluates this path based on the directory where the XSLFO file resides.
To remove ambiguity, use an absolute path instead (i.e. starting with the drive letter, C:\folder\ etc.)
You haven't specified a size for the image. I suspect content-width="scale-down-to-fit" needs a size to scale to.
<fo:external-graphic width="1cm"...
And what are the symptoms/what do you see in the PDF? In Antennahouse Formatter, if it can't find an image, it will place a placeholder. That helps narrow down the problem.

css not displayed correctly

I have the css made by one web designer, and that css file contains classes like :
.icon-phone-alt:before {
content: "\e064";
}
and in my view page i have something like :
<span class="icon-phone-alt"></span> Tel.: (+40 21) XXXXXXXX<br />
The problem is that instead of something like this :
i get this:
I have to mention that my browser is configured to utf8 and the original html page is displayed correctly with the same browser. I think that this has something to do with character encoding but i do not know how to handle the situation.
You have to use special font for icon span which displays icons as characters. For example:
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
<span class="icon-phone"></span> Tel.: (+40 21) XXXXXXXX<br />
Maybe you have not included your Glyphicons/special fonts.
You should include them first. Try to look at this implementation:
https://github.com/mdo/bsu/blob/master/step-4/bootstrap-less/glyphicons.less

Resources