I'm trying to insert LUI (Leonardi UI) library icons with CSS into our web app (QlikSense).
It works perfectly fine with icons with one "word" such as "play":
.source-sans-pro .qv-collapsed-listbox .title-wrapper::after {
font-family: "LUI icons" !important;
content: "play";
padding-right: 10px;
}
However, when trying to add icons with two "words" such as "arrow-down", it wont work anymore:
.source-sans-pro .qv-collapsed-listbox .title-wrapper::after {
font-family: "LUI icons" !important;
content: "arrow-down";
padding-right: 10px;
}
Anyone an idea how to fix this?
Try and replace the - with an _ (underscore) character, e.g. content: "arrow_down";
Related
I want to add a "BETA" symbol at top of the "Brand Name" like "TM" symbol in my Navbar how can I do that..?
You can just use css to achieve this, and when you copy the text it won't get copied!
h1::after {
content: 'BETA';
font-size: 12px;
vertical-align: top;
}
<h1>StackOverflow</h1>
I'd like to add a Font Awesome Icon and other styling (e.g., <em>) to the qq-drop-area-text of FineUploader. Is this possible? It looks like the text is styled using a CSS content area.
Example HTML from FineUploader:
<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here!">...</div>
Desired:
<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="<span class='fa fa-upload'></span> Drop files <em>here</em>!">...</div>
Thanks
.qq-uploader:before {
/*content: attr(qq-drop-area-text) " ";*/
font-family: FontAwesome, 'Open Sans', Arial;
content: "\f0c5 Drop files here";
position: absolute;
font-size: 200%;
left: 0;
width: 100%;
text-align: center;
top: 45%;
opacity: 0.25;
}
Here's my example where f0c5 is the Unicode value for the Font Awesome icon I wanted to use. In this case it's the fa-files-o icon. Click any icon on the Font Awesome list of icons to display its Unicode value.
To add more styles to the dropzone message, simply include the following in your project's CSS file:
.qq-uploader:before {
// dropzone text styles go here
}
On my website i use non standard cyrillic font. It looks well but it have problems with some special symbols, for example - quotes (for some reason opening and ending quote look different).
I would like to set font-family for specific symbols using CSS. Is it possible?
You can manage this using a unicode range #font-face rule
MDN Reference
I'm unsure as to how well this demo will work in a Snippet as it will depend on you have the designated font installed. However, in general, it's something like this:
#font-face {
font-family: 'Algerian';
src: local('Algerian');
unicode-range: U+022-026;
}
div {
font-size: 4em;
font-family: Algerian, sans-serif;
}
div {
text-align: center;
}
p {
font-size: 72px;
}
<div>
<p>" Lorem & Ipsum "</p>
</div>
In this instance I've applied the rule to open & closed quotes and the ampersand.
Support: CanIUse.com
For Firefox though:
Support can be enabled in Firefox using the layout.css.unicode-range.enabled flag
If you want to change your symbols to a new font then you'll have to wrap them in a tag and assign a class...
in your CSS add a class for the font
.symbol {
font-family: Arial;
}
Then in your HTML you will need to use this class on your symbols...
<p>Jesse Jackson? Do you even... ah, I see you have a telephone at least. You know that blinking thing I've been calling you on?
<i class="symbol">"<i>I will break this, I will BREAK THIS.<i class="symbol">"<i> </p>
If the problem is only for quotes?
You could set the :before and :after pseudo for a <blockquote></blockquote>, which could be set to a icon font. Perhaps fontawesome?
blockquote {
position: relative;
padding: 1em 2em;
}
blockquote:before,
blockquote:after {
position: absolute;
font-family: FontAwesome;
}
blockquote:before {
content: "\f10d";
left: -1em
}
blockquote:after {
content: "\f10e";
right: -1em
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="stylesheet">
<blockquote>Jesse Jackson? Do you even... ah, I see you have a telephone at least. You know that blinking thing I've been calling you on? I will break this, I will BREAK THIS. Damn druggie idiot. Is this what you've been doing the whole time I've been trying to reach
you?</blockquote>
you can use easily like
.custom-font{
font-family:any
}
and then
<div>hello there <span class='custom-font'>i am custom</span> but i am not</div>
I would like to create a tile which is inherited from sap.suite.ui.commons.GenericTile and displays only an icon (centered in the middle of the tile). Due to the centering, I cannot use the standard aggregations or property as they have the icon placed at a specific position (which is on the left lower side).
I have tried the following but with no luck:
$.sap.declare("myAddTile");
sap.suite.ui.commons.GenericTile.extend("myAddTile", {
init: function() {
// do something for initialization...
sap.suite.ui.commons.GenericTile.prototype.init.call(this);
},
renderer: function(oRm, oControl) {
var oPlusIcon = new sap.ui.core.Icon({
src: 'sap-icon://sys-add'
}).placeAt(oControl);
sap.suite.ui.commons.GenericTileRenderer.render(oRm, oControl);
}
});
The resulting tile is empty...
I played around a bit with the renderer and came up with this solution:
rm.write("<div");
rm.addClass("myAddTileIcon");
rm.addClass(oControl.getSize());
rm.writeClasses();
rm.writeAttribute("id", oControl.getId() + "-icon");
rm.write(">");
rm.renderControl(new sap.ui.core.Icon({
src: 'sap-icon://sys-add',
size: "5rem"
}));
rm.write("</div>");
Of course, the right alignment of the icon needs to be taken care of, too:
.myAddTileIcon .sapUiIcon {
font-family: SAP-icons;
font-size: 5rem;
line-height: inherit;
cursor: default;
text-align: center;
display: block;
padding-top: 20%;
vertical-align: middle;
color: grey;
}
If someone has a comment how to solve this in a more elegant way, please post.
Cheers
I've been using entypo (downloaded from entypo.com), and displaying the icons like so:
.icon:before {
display: inline-block;
font-family: 'Entypo';
text-decoration: none;
speak: none;
}
.email:before {
content: "\2709";
}
Pretty standard. But since the hinting is off when you download it from entypo.com, I've switched to downloading it from fontello. Only now my css content codes don't work anymore.
I can see in the demo that fontello uses spans like this, to call the icons from the html:
<span class="i-code">0xe829</span>
But that just seems ugly to me. I want to do it from the css, but how can I find out what kind of codes to put in my css?
Ok, so I found out that what you have to do is not use the codes as mentioned on fontello:
U+E84D
U+E854
But rewrite these to:
\E84D
\E854
(so remove the "U+" and replace it with a "\")
Use them like so:
content: "\E84D";
EDIT:
So, on request, the complete CSS syntax you would use is:
.icon:before {
display: inline-block;
font-family: 'Entypo';
text-decoration: none;
speak: none;
}
.email:before {
content: "\E84D";
}
In combination with the following HTML:
Mail me