I want to give my website some icons. Now I see that many people use this website Flaticon.
What I have done is put something like this in my CSS:
/**
* Font 1
*/
#font-face {
font-family: "Flaticon1";
src: url("flaticon1.eot");
src: url("flaticon1.eot#iefix") format("embedded-opentype"), url("flaticon1.woff") format("woff"), url("flaticon1.ttf") format("truetype"), url("flaticon1.svg") format("svg");
font-weight: normal;
font-style: normal;
}
[class^="flaticon1-"]:before,
[class*=" flaticon1-"]:before,
[class^="flaticon1-"]:after,
[class*=" flaticon1-"]:after {
font-family: "Flaticon1";
font-size: 20px;
font-style: normal;
margin-left: 20px;
}
.flaticon1-basic21:before {
content: "\e000";
}
.flaticon1-bicycle21:before {
content: "\e001";
}
.flaticon1-car6:before {
content: "\e002";
}
/**
* Font 2
*/
#font-face {
font-family: "Flaticon2";
src: url("flaticon2.eot");
src: url("flaticon2.eot#iefix") format("embedded-opentype"), url("flaticon2.woff") format("woff"), url("flaticon2.ttf") format("truetype"), url("flaticon2.svg") format("svg");
font-weight: normal;
font-style: normal;
}
[class^="flaticon2-"]:before,
[class*=" flaticon2-"]:before,
[class^="flaticon2-"]:after,
[class*=" flaticon2-"]:after {
font-family: "Flaticon2";
font-size: 20px;
font-style: normal;
margin-left: 20px;
}
.flaticon2-basic21:before {
content: "\e000";
}
.flaticon2-bicycle21:before {
content: "\e001";
}
.flaticon2-car6:before {
content: "\e002";
}
http://support.flaticon.com/hc/en-us/articles/205019862-CSS-code-for-Iconfont-
I downloaded the wanted icon but it doesn't display the icon. It displays this:
What have I done wrong?
1. Prepare your collection
Add monocolor icons to the collection for your website
2. Download iconfont
Open your collection and press the Download collection button, then select Iconfont
3. Prepare your collection
Copy the source files and CSS to your web folder.
4. Load the stylesheet
Request the CSS stylesheet from the head of your web.
< link rel="stylesheet" type="text/css" href="your_website_domain/css_root/flaticon.css" >
5. Use the classes
Use the classes of each icon and they will appear on your website. After, manipulate them with CSS.
Use example:
<i class="flaticon-airplane49"></i> or <span class="flaticon-airplane49"></span>
Apparently I downloaded file formats, not font files. I was only able to download icons as either Iconfont or SVG sprite after I have put icons in my collection. It downloads the whole collection of course.
Just download the icon and put this in the head:
<link rel="icon" href="resources/filename"/>
You need to have the flaticon.css file in your server (and the other 5 or 6).
Then check which items are available there.
.flaticon-bath:before { content: "\f122"; }
And then you just use the class.
To fix the size...
font-family: Flaticon;
font-size: 50px;
font-style: normal;
margin-left: 7px;
}
This is how you can change the font size, just paste the below code in your css file and that's it.
[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
font-size: 150px;
}
Related
I want to replace the images with new ones but the problem is that the images are in font style.
Now I want to replace the following with normal image source, like
<img src="images/upload.png>
Below is the CSS file in which I want to make changes
#font-face {
font-family: "fl-bigmug-line";
src: url("../fonts/fl-bigmug-line.eot");
src: url("../fonts/fl-bigmug-line.eot#iefix") format("embedded-opentype"),
url("../fonts/fl-bigmug-line.woff") format("woff"),
url("../fonts/fl-bigmug-line.ttf") format("truetype"),
url("../fonts/fl-bigmug-line.svg") format("svg");
font-weight: normal;
font-style: normal;
}
.fl-bigmug-line-ico,
[class^="fl-bigmug-line-"]:before, [class*=" fl-bigmug-line-"]:before,
[class^="fl-bigmug-line-"]:after, [class*=" fl-bigmug-line-"]:after {
font-family: 'fl-bigmug-line';
font-size: inherit;
font-weight: 400;
font-style: normal;
}
.fl-bigmug-line-add137:before {
content: "\e000";
}
.fl-bigmug-line-add139:before {
content: "\e001";
}
.fl-bigmug-line-add149:before {
content: "\e002";
I tried to change the content like content: url("images/upload.png"); but it's not working.
You can do something like this:
.the-icon {
display: inline-block;
width: 30px;
height: 30px;
}
.the-icon:before {
content: url("https://www.gravatar.com/avatar/3116de43059d7ea110181a5bb773bcdd?s=30");
}
<div class="container">
<i class="the-icon"></i> Upload
</div>
I have a website template which uses flaticons. It has a folder with files flaticon.css, flaticon.eot, flaticon.ttf, flaticon.svg, flaticon.woff and some others. I can use the icons by simply importing the CSS into a page and doing something like <i class="flaticon-world-grid">.
Now I want to download some new flaticons and use them on my site. I found some on flaticon.com and it gives me an option to download it in multiple formats. How to "install" these files and edit my CSS so that I can use the new icons like the ones that are already there?
The css file has content like this:
.flaticon-wand2:before {
content: "\e0fb";
}
.flaticon-wealth:before {
content: "\e0fc";
}
.flaticon-website34:before {
content: "\e0fd";
}
.flaticon-world-grid:before {
content: "\e0fe";
}
Which format should I download, where to put the new files, and what to add into the css file to be able to use them?
As mentioned here you can use two or more font-face, with different font-family name.
Like this:
#font-face {
font-family: "Flaticon";
src: url("../fonts/Flaticon.eot");
src: url("../fonts/Flaticon.eot?#iefix") format("embedded-opentype"),
url("../fonts/Flaticon.woff") format("woff"),
url("../fonts/Flaticon.ttf") format("truetype"),
url("../fonts/Flaticon.svg#Flaticon") format("svg");
font-weight: normal;
font-style: normal;
}
[class^="flaticon-"], [class*=" flaticon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: flaticon !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
.flaticon-arrows:before { content: "\f100"; }
.flaticon-back:before { content: "\f101"; }
/**
New Fonts to add
*/
#font-face {
font-family: "Flaticon1";
src: url("../fonts/Flaticon1.eot");
src: url("../fonts/Flaticon1.eot?#iefix") format("embedded-opentype"),
url("../fonts/Flaticon1.woff") format("woff"),
url("../fonts/Flaticon1.ttf") format("truetype"),
url("../fonts/Flaticon1.svg#Flaticon") format("svg");
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: "Flaticon1";
src: url(".../fonts/Flaticon1.svg#Flaticon") format("svg");
}
}
[class^="flaticon1-"]:before, [class*=" flaticon1-"]:before,
[class^="flaticon1-"]:after, [class*=" flaticon1-"]:after {
font-family: Flaticon1;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
.flaticon1-shapes:before { content: "\f100"; }
.flaticon1-share:before { content: "\f101"; }
My website is not showing my fonts...
CSS Code is as follows...
#font-face {
font-family: 'IconicStroke';
src: url("fonts/iconic/iconic_stroke.eot");
src: local('IconicStroke'),
url("fonts/iconic/iconic_stroke.svg#iconic") format('svg'),
url("fonts/iconic/iconic_stroke.otf") format('opentype');
}
.iconic {
color:inherit;
font-family: "IconicStroke";
font-size: 38px;
line-height: 20px;
vertical-align: middle;
}
Please help...
It is showing in my machine but its not showing after uploading in the space....
There is no http://rgvnnemfl.com/iconic.css, which I'm guessing is where you have the above code. I think your link to the iconic.css is wrong.
If your css in css folder, then your fonts path may be
../fonts/iconic/iconic_stroke.eot
#font-face {
font-family: "IconicStroke"; src: url('../fonts/iconic/iconic_stroke.eot');
}
.iconic {
font-family: "IconicStroke", sans-serif;
}
This should work just fine.
After much review, I can't get the correct display of a custom font I created through fontsquirrel. Chrome's Inspector shows the icon is in place but all I get is this default icon box ;o(
Rails 4 app, Bootstrap
Any ideas?
application.rb:
config.assets.paths << Rails.root.join("app", "assets", "fonts")
html:
<div class="hatfont icon-balloon01"></div>
here's my CSS:
hatfont {
font-family: 'haticon';
text-transform: uppercase;
div {
font-family: haticon;
}
}
#font-face {
font-family: 'haticon';
src:assets-url('fonts/haticon.eot');
src:assets-url('fonts/haticon.eot?#iefix') format('embedded-opentype'),
assets-url('fonts/haticon.woff') format('woff'),
assets-url('fonts/haticon.ttf') format('truetype'),
assets-url('fonts/haticon.svg#haticon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'haticon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-graphs:before {
content: "\e600";
}
I've had this issue before myself. I can't identify the problem specifically from what you've provided, but a few things come to mind. Check your link references in your CSS. Make sure no files were moved and that your stylesheet is in the same directory as your fonts folder. Also, the %> under your font-face looks out of place... I don't know if that's a Rails thing or not. Here's an example of something that I've used before that's worked. Obviously, you'd need to substitute your font files. :
#font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.eot?v=4.0.3');
src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),url('fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'),url('fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'),url('fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
I want to use a Font Awesome icon as CSS content, i.e.,
a:before {
content: "<i class='fa...'>...</i>";
}
I know I cannot use HTML code in content, so is it only images left?
Update for FontAwesome 5
Thanks to Aurelien
You need to change the font-family to Font Awesome 5 Brands OR Font Awesome 5 Free, based on the type of icon you are trying to render. Also, do not forget to declare font-weight: 900;
a:before {
font-family: "Font Awesome 5 Free";
content: "\f095";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 900;
}
Demo
You can read the rest of the answer below to understand how it works and to know some workarounds for spacing between icon and the text.
FontAwesome 4 and below
That's the wrong way to use it. Open the font awesome style sheet, go to the class of the font you want to use say fa-phone, copy the content property under that class with the entity, and use it like:
a:before {
font-family: FontAwesome;
content: "\f095";
}
Demo
Just make sure that if you are looking to target a specific a tag, then consider using a class instead to make it more specific like:
a.class_name:before {
font-family: FontAwesome;
content: "\f095";
}
Using the way above will stick the icon with the remaining text of yours, so if you want to have a bit of space between the two of them, make it display: inline-block; and use some padding-right:
a:before {
font-family: FontAwesome;
content: "\f095";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
}
Extending this answer further, since many might be having a requirement to change an icon on hover, so for that, we can write a separate selector and rules for :hover action:
a:hover:before {
content: "\f099"; /* Code of the icon you want to change on hover */
}
Demo
Now in the above example, icon nudges because of the different size and you surely don't want that, so you can set a fixed width on the base declaration like
a:before {
/* Other properties here, look in the above code snippets */
width: 12px; /* add some desired width here to prevent nudge */
}
Demo
Another solution without you having to manually mess around with the Unicode characters can be found in Making Font Awesome awesome - Using icons without i-tags (disclaimer: I wrote this article).
In a nutshell, you can create a new class like this:
.icon::before {
display: inline-block;
margin-right: .5em;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
And then use it with any icon, for example:
<a class="icon fa-car" href="#">This is a link</a>
If you have access to SCSS files from font-awesome, you can use this simple solution:
.a:after {
// Import mixin from font-awesome/scss/mixins.scss
#include fa-icon();
// Use icon variable from font-awesome/scss/variables.scss
content: $fa-var-exclamation-triangle;
}
You should have font-weight set to 900 for Font Awesome 5 Free font-family to work.
This is the working one:
.css-selector::before {
font-family: 'Font Awesome 5 Free';
content: "\f101";
font-weight: 900;
}
a:before {
content: "\f055";
font-family: FontAwesome;
left:0;
position:absolute;
top:0;
}
Example Link:
https://codepen.io/bungeedesign/pen/XqeLQg
Get Icon code from:
https://fontawesome.com/cheatsheet?from=io
You can use unicode for this in CSS. If you are using font awesome 5, this is the syntax;
.login::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}
You can see their documentation here.
As it says at FontAwesome website FontAwesome =>
HTML:
<span class="icon login"></span> Login</li>
CSS:
.icon::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.login::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}
In .login::before -> edit content:''; to suit your unicode.
Update for Font Awesome 5 using SCSS
.icon {
#extend %fa-icon;
#extend .fas;
&:before {
content: fa-content($fa-var-user);
}
}
Here's my webpack 4 + font awesome 5 solution:
webpack plugin:
new CopyWebpackPlugin([
{ from: 'node_modules/font-awesome/fonts', to: 'font-awesome' }
]),
global css style:
#font-face {
font-family: 'FontAwesome';
src: url('/font-awesome/fontawesome-webfont.eot');
src: url('/font-awesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('/font-awesome/fontawesome-webfont.woff2') format('woff2'),
url('/font-awesome/fontawesome-webfont.woff') format('woff'),
url('/font-awesome/fontawesome-webfont.ttf') format('truetype'),
url('/font-awesome/fontawesome-webfont.svgfontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
i {
font-family: "FontAwesome";
}