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.
Related
I am digging into an existing reactJS site, and many images are being rendered by using the css content property. I am looking at the css sheet in VSCode, and many classes are appearing with content listed as "". I'm not sure if I need a plugin to view the actual content, but I can't find a way to see it at this point.
I can use alter the content attribute to point to a different image, but want to know where this is being generated so I can alter it at the source. The site is setup to use Contentful, but assets there are called directly on pages, not in css.
.fa-discord:after {
content: "";
}
I'd like to be able to track down where this image is being stored or generated. Any help is appreciated!
That's a Font Awesome icon for Discord, and can be found here. Yes, you need to include Font Awesome on your website if you want to render any of their glyph icons. And you can easily work out whether a website is attempting to use Font Awesome glyph icons or not, as their selectors all start with fa- and replace the content.
Font Awesome icons are generated through an included CSS file, most commonly located in a folder like /fonts/font-awesome/css/font-awesome.min.css.
This file uses unicode characters to generate the corresponding glyph representations, and the specific unicode character for the Discord icon is 392. Thus, content: "\f392" will render the relevant glyph icon.
If a box or square shows up instead of an actual glyph, that means that the font you're using doesn't incorporate that particular unicode glyph. Font Awesome rapidly expands its coverage of unicode glyphs, and you will need to update to at least Font Awesome 5.0.0 in order to use the Discord glyph.
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
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.
As fonts are better than images to show icons in different devices, I want to make my custom font icon library like "Font Awesome", in my AngularJS project.
Are there any way to do that?
I created a font in .ttf and .svg with my icons, and the result is fine, but any icon have a related letter. For example, the home icon is the letter "H" in the new font.
This method have a little issue in Firefox. In Firefox, before the icon is changed to home icon, you can see the letter "H".
What is the best practice to do that?
Is posible to solve the little issue in Firefox?
Thanks.
Preload the font. FF is using a fallback typeface until the requested face is available.
Why doesn't it happen with FontAwesome?
<i class="fa fa-something"></i>
generates text and only one face is specified for the generated text even when it's contained in an element with a style that does specify a fallback list.
I suggest you look at the CSS that accompanies FA.
You should try using a tool like Font Custom to generate your custom icon webfonts starting from your svg icons. FontCustom will generate the css and the font files and there are a lot of options that you can configure.
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)