In some template I see that an arrow that created with CSS. something like this:
div:after{
content:"\f107";
}
this code display an arrow like this :
what is this code? where I can find more codes?
Using content property embeds a virtual content inside an element, it is used with a pseudo :before or :after, so if you use :before, the content will be embedded before.
From MDN :
The content CSS property is used with the ::before and ::after
pseudo-elements to generate content in an element. Objects inserted
using the content property are anonymous replaced elements.
Content property can hold any character, number, entities. For more information, you can refer an article here.
Also, you can get an handy converter here.
This method is also used by font-awesome - Example and other related svg font embedding libraries, where you can simply call classes to the elements and the fonts will be embedded virtually.
Also, just a side information, content generated using CSS content property is inline by default, also this is rendered inside the element and not outside..
It's an escaped unicode character.
As other answers have explained, the CSS rule uses the content property to insert a character by its Unicode number.
However, the character used is U+F107 PRIVATE USE CHARACTER-F107. This means that it has no meaning except by private agreements and should not be used in public information interchange. Unfortunately, some “awesome” tricks use Private Use code points to insert graphic symbols. This means that unless a very specific font, with some symbols assigned to those code points is used, a generic symbol of an unknown character appears.
So it is much safer to use an image instead, in the content proper.
CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it's called a pseudo element because it's not actually selecting anything that exists on the page but adding something new to the page.
Font Awesome is a web font containing all the icons from the Twitter Bootstrap framework, and now many more.
You can find a list of FontAwesome here : A list of Font Awesome icons and their CSS content values
You can also go through this link, FontAwesome Examples, where you can see different icons and how to apply different size on it.
CSS Content Property : The content property is used with the :before and :after pseudo-elements, to insert generated content.
Read more
Related
I want to add text just with css.
But pseudo-elements are not option.
Point is to add text just with css, and have text in DOM.
Is that posssible ?
So this is not option :
.someClass:before {
content: "some text";
}
In general, the entire purpose of CSS is to preserve the distinction between style/design and content. The pseudo-selectors are a little unique in that they don't select actually existing content to "style" it, but rather create the content in the first place.
This doesn't exactly interfere with the purpose of CSS because the distinction between content and design can sometimes get a little fuzzy. Cf., for example, http://css-tricks.com/css-content/ which talks of how appending "E-mail: " before every email address can actually be a style decision.
That said, I really don't understand why you don't want to use pseudo-elements. Support is near ubiquitous (http://css-tricks.com/browser-support-pseudo-elements/). Your only other option would be to use JS/jQuery or good ol' HTML.
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. (w3org)
You can not add any content without the use of :before or :after
In order to edit the DOM consider using jQuery or any other js script:
jQuery:
$('body').append('<div>Your new content</div>');
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).
I wrote a class with content but seems content just work for pseudo-classes.
How to modify my code?
http://jsfiddle.net/fuRKC/
button.follow{
content: 'Follow';
}
button.followed{
content: 'Unfollow';
}
By current CSS specifications, the content attribute only applies to :before and :after pseudo-elements. There is an old proposed extension, CSS3 Generated and Replaced Content Module, which would allow the property to apply to real elements, too. The proposal is however ten years old. It has only been implemented in Opera, except for the special case where the content value is an URL expression, interpreted as referring to an image – this is supported by Chrome and Safari, too.
Moreover, even the limited support wouldn’t do much good here, since the extension does not seem to work on Chrome when the element is a button, and on Opera, the generated content appears as such, not within a button widget.
Since your button elements have empty content, you don’t really need the extension, since for empty content, adding content is equivalent to replacing content. So in this case, you would just need to use button.follow:before, as in Kippie’s answer. Note, however, that this means that the button appears as completely empty when CSS is disabled.
So whatever might be the reason for using generated content, instead of button text in HTML, a more robust approach would be to change content with JavaScript. JavaScript can be disabled, of course, but you can use actual button text as fallback, e.g. <button id=follow>Follow</button>, and replace the content when JavaScript is enabled.
You are correct. content only works with the :before and :after pseudo classes.
Just make your css like this:
button.follow:before{
content: 'Follow';
}
button.followed:before{
content: 'Unfollow';
}
"The content property is used with the :before and :after pseudo-elements, to insert generated content."
http://www.w3schools.com/cssref/pr_gen_content.asp
More info:
http://css-tricks.com/css-content/
I have made some templates on wikia.com, which contain only CSS code (key:value;).
My problem is having another template use these style templates in a style attribute tag.
style="{{MyTemplateStyle}}"
This code does not evaluate as expected. The CSS code is outputted before the element and the style attribute is not included inside the element.
Am I trying something not possible for a wiki ?
I merely want to be able to change styling on certain templates in one place, like regular HTML & CSS pages.
CSS styling specified from the style="" attribute always takes priority over any other css, even if you use !important in a CSS specification.
Therefore any edits you make to your CSS on Wikia will not ever override the CSS specified inside an attribute.
Kim, you were right to switch to classes instead of embedding in-line styles via templates.
The very idea of using templates suggest that this was going to be re-used in more than one place, applying styles to a group or, in fact, a class of elements.
This approach is much simpler to read and maintain (as you only have one, central place to edit), and also, if done right, will enable you to seamlessly change the colour scheme via Special:ThemeDesigner.
In .Net, all styles are not listed in corresponding controls and html tags. For example, the style "WORD-BREAK","WORD-WRAP" etc. Any site which lists all styles available to all tags and controls ?
W3schools is a great place to start learning CSS.
The official specification is another place to look.
Have a look at w3schools. http://www.w3schools.com/css/css_reference_atoz.asp
But remember that there are also styletags specific to a certain browser (like the mozilla tags).
As far as I know Visual Studio shows the tags which are compatible with all browsers (and that might be the reason why you are missing some items).
Also, you can apply all style tags to all HTML tags (you can assign font to an img tag), but they might not give you the effects you are hoping, but the beauty of CSS is that you can assign any style to any tag (and if you are embedding tags in eacht other it will inherit the style, so for example assigning a list-style to a div might not look usefull, but is allowed and will cause all lists in that div to look the same, ofcourse this can be done in various other ways).