Firstly let me admit that I am a beginner in CSS. I recently came across a nice website: http://www.sitepoint.com/better-solution-managing-z-index-sass/ and was curious to know how the "3" is displayed alongside "CSS". When I tried to check through the firebug, I saw a class name ".category-css .icon-category:before" which contains content property which has some strange content.
Could you please let me know where is content property pointing to. I know this might be the silliest question, but I am clueless.
On the <i class="icon-category> they are setting a font-family: 'sitepoint', Sans-Serif;, on the :before element the content element is using a Unicode, which will relate to a character from their custom font 'sitepoint'.
For example, Font Awesome uses unicodes for it's characters, as you can see each character has a unique code next to it.
Related
I have found a question mark in a square in css code. It belongs to a class of a font item. The CSS is generated from SCSS.
What does the question mark in the square mean? My search with Startpage didn't provide any explanation. Who can help?
The SCSS code:
This mostly is a specific icon of the font.
Because your font (currently in use - not the one used in css/scss) does not support this given character, it can not be displayed.
Update
It means your current font (to view the characters) does not support this Character.
Fonts using something like this:
Each character has his own address to identify it. And this square is outside your supported characters of your IDE/Editor.
What your using is an address (sometimes you see \E1234) to the icon search from FontAwesome.
This shows when the interpreter failed to convert. What was the SASS content for the same?
I'm editing the CSS of a WordPress theme in order to make it fit my needs better. I've come across what, as far as I can tell, retrieves the favicon for different social media sites.
.social-menu li a[href*="flickr.com"]::before { content: '\f16e'; }
I follow that it looks for flickr.com in the url I provide, but what's the content property doing? How could I change the content field to support another site, such as StackOverflow?
Like #Paulie_D said, icon fonts.
The content property is pointing to a Unicode character in a icon font set. The CSS selector is prependnig the icon (via pseudo element) to an anchor element <a> that has a link that contains flickr.com.
This might be a coincidence but the current version of FontAwesome uses the same unicode character \f16e for Flickr.
As far as "supporting other sites, such as StackOverflow," you'll be at the mercy of the icon font. What ever the icon font provides is what you can use.
If the site is indeed using FontAweseom then you'll have quite a few icon options available to you, including StackOverflow \f16c. Here is a list of all the FontAwesome Icons.
I am trying to use these icons along with openweathermap and i successfully managed to, although i can not change their size! They way they are used is like font-awesome ones : <i class="wi wi-omw-100"></i>
What attribute do i change to make it larger ? (font awesome ones don't work i tried!) and i couldn't find something specific in the documentation.
starter level CSS user here.
( the code: http://codepen.io/dioannou/pen/grveyR )
I know this is a month old but I thought I'd tell you how I did it:
After looking around a bit, I found this solution to target all elements that have the tag <i> tag.
wildcard * in CSS for classes
This may not be the optimal solution and you are right there is very limited documentation.
In the end, I just did this in an overriding css file:
i[class^="wi-"], i[class*=" wi-"] {
font-size: 200px;
}
This is probably isn't the optimal solution and I will post back here if I find a better way. I haven't had a chance to look at the original CSS file for a specific sizing class but this did the trick for me where I just needed to use it in one page and move on.
Hope this helps somebody.
wanted to put a social icons on my site, when looking for some i ran across this site:
A site with a social icons that i want to adapt
then i saw that they are not images:
I don't know that css attribute "content"- what is it?
what is \e006, is it a font? looked at the site resources but didn't see anything related.
and looked for it on google "css content attribute" and "css \e006" But no luck.
The ::before selector inserts content before the content of the selected class that is .icon-instagram. We use the content property to specify the content to insert. You can only use the content property with pseudo-elements like :after and :before.
In your case, \e006 is a UTF-8 character. What happens is, whenever something has the class .icon-instagram applied to it, it will append this character before it. This is what it means by the pseudo-element :before. It might be a glyphicon. (Instagram icon).
So, I know that this isn't something that is normally a good idea for a website, but I have a special purpose/intent for such a use:
I have a multilingual dictionary that I'm working with online, where I need one of the languages to be in a specific font, from a file that I specify locally. However, I want this language to be rendered ONLY in this font, as if it is rendered using any other font, it will render incorrectly. That's all fine and dandy, and I can load the file in CSS and whatnot.
But I want to make it so that if it can't load that file, either for one reason or another, or something goes wrong, it can't go to another font. Basically, render this text using this font, and if you can't do that, don't just try and render it with Arial or whatever is the default -- show me blocks, show me a stark something.
I've spent a bit looking around, but am not sure what in CSS I would be using for this. Suggestions/help? Thanks :)
As an update to this question, since April 2013 there exists the Adobe Blank Font, which can be used for that purpose.
You may build a cross-browser css with FontQuirrel WebfontGenerator and the Adobe Blank font files.
If you just need the font in OpenType format you can use this single css file with the already embedded font
You can't do this. Text is text and text has to have a font that it is to be rendered in. If you really want, there's probably some weird JavaScript function that can detect the actual font being used for the text and if it doesn't match the one you want, then you can hide it or something. But in the end, your only option is to have the text displayed in some obscure font, or completely hide the text. If the text is visible, it has to be rendered using some font.
You could also theoretically create your own font where all the characters are just blank, but that seems highly illogical and such a waste of resources to make people download a font just so it can display meaningless emptiness.
There is no "don't render fonts" option. It's a font, it needs to be rendered, or else it's hidden visually in the DOM.
You could use Javascript to find out the font being applied to a certain block, and if it's not the font you want, just hide it. Or display a message.
Another solution is somehow specify the content to be empty. For example, I'm trying to override the +/- character that a Webix tree displays using Font Awesome:
#lhn-tree-container .webix_tree_open:before {
content: '';
}
This only works with the :before and :after pseudo-elements though.