Often we can see CSS coding practices that use pseudo class such as before or after along with content inside it to eventually make it become an icon. such as
.email:before {content: '\e600'; font-family: special-font}
I think this question could be more relevant to how font-family works to render icon. Any idea on how does this works are welcome or point me some directions that I can do more research.
Maybe this will help?
Icon Fonts: How do they work?
Basically, the content code maps to a point in the font. The font is actually an icon. That css is a way to place the icon in the content without actually specifying it in the html content.
Full explanation here: https://webstandardssherpa.com/reviews/responsive-webfont-icons/?utm_source=buffer&utm_campaign=Buffer&utm_content=buffereac5b&utm_medium=google
Related
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'm with some doubts here, i've trying to find a tutorial or example on 'how to' but i can't find any.
I have a good knowledge in css (not professional, but i understand) and when working with some templates or tutorials i've seen some flat icons on the website, when i go to the css class, what i found is something like these: "example:before { content: "\e00a"; }"
I'd like to know how is it done? How can i change it to another icon? Or even, how can i create another 'flat icon' based on the same process?
If anyone can help me, please.
Thanks
You can use the content property for icons for example. \e00a for example refers to this character:
It can be used as the bullet point for list items:
li:before {
content:'\e00a'
padding-right:12px;
}
Some fonts come with characters like the ones found here. You can use those characters like \f042 for example to display the screen contrast symbol. however you will need to download the font first to make use of it. Read more about #font-face here
Use Predefined CSS files like "fontawsome" or "glyphicons" (Google It). And then use their css class like <i class="fa fa-facebook"></i> this will show facebook icon.
You are looking for font icons. This gives you scalable vector icons that can be customized with CSS on size, color, drop-shadow, etc. -- Font Awesome
Here is a great example.
http://fortawesome.github.io/Font-Awesome/icons/
I am trying to modify a template and am unable to locate the images on the very bottom right of the page (social media icons): http://flockwithme.com/
I would like to replace them with different icons, but none of the files (css, js, etc.) contain the location of the files.
If anyone could help me modify/replace them, I'd appreciate it very much. Thanks
First off, the icons are not images but are actually part of a web font defined as "font-family: 'Simple-Line-Icons';" in the application's css.
Which I assume is this one - http://graphicburger.com/simple-line-icons-webfont/ ?
Second, you can easily inspect an element's html/css code by:
Viewing the website in Chrome
Right clicking the element (in this case, the icon)
And choosing "Inspect Element"
In this page they use fonts for that icons. You should see the fonts for that.
thats not image. it set in before of every span
like this
.icon-social-twitter:before {
content: "\e009";
}
they using font-family: 'Simple-Line-Icons';
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.
I can't find the link anywhere, and I searched all over Hacker News (where I recall seeing the project), with no luck.
Instead of having to download the images from The Noun Project and such, you just included a css file and specified the name of the noun as a class under the tag, or something. Is this out there?!
You might be thinking of the Font Awesome, the pictographic font with 150 icons, that can be used with twitter bootstrap.
With Fort Awesome, you link to FontAwesome in a CSS tag. Then you add the class of the icon you want to an HTML element.
In my jsFiddle example, I have a camera and play circle beside some text.
Nick
Maybe you mean: http://nounpack.com ?
They have a sprite with many icons taken from the noun project and then you can include them as icons with css.
Agree with #Nick Silva that Font Awesome is undoubtedly the best place to start for effortless 'noun project-esque' css.
That said, to answer your question, to use Noun Project icons directly you would need to wrap your own. The best way to do this (IMHO) is to use Font Custom
Font Custom is a command line tool used to generate custom icon webfonts (CSS) from SVGs (Noun Project icons)