I am entering the following code:
a::before {
content: "\f061";
font-family: FontAwesome;
}
But font-awesome icon doesn't show up, just an empty square.
What is the problem?
Thank you!
TRY THIS, it works for me :)
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
or
#import url("https://use.fontawesome.com/releases/v5.2.0/css/all.css");
a::before {
content: "\f061";
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 900;
text-decoration: inherit;
}
This answer from #TemaniAfif may be helpful.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
#import url("https://use.fontawesome.com/releases/v5.2.0/css/all.css");
.fp-prev:before {
color:#000;
content: '\f35a'; /* You should use \ and not /*/
font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
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 need to display the bootstrap Glyphicons before the element in which the .normal-text class has been used: I am trying with the following but it shows the code instead the icon.
.normal-text{
border-left-width: 1px !important;
font-size: 110% !important;
color: #100cce;
font-family: 'Book Antiqua';
}
.normal-text::after{
content: '<span class="glyphicon glyphicon-pencil"></span>'
}
<blockquote class="normal-text"> Some Text </blockquote>
Help required in this please.
Use unicode instead. content:'' will treat code block as a text.
.normal-text{
border-left-width: 1px !important;
font-size: 110% !important;
color: #100cce;
font-family: 'Book Antiqua';
}
.normal-text::after{
content: "\270f";
font-family: 'Glyphicons Halflings';
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<blockquote class="normal-text"> Some Text </blockquote>
You can not display icon like that. You should used icon unicode with it's font family.
.normal-text{
border-left-width: 1px !important;
font-size: 110% !important;
color: #100cce;
font-family: 'Book Antiqua';
}
.normal-text::after{
content: "\270f";
font-family: 'Glyphicons Halflings';
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<blockquote class="normal-text"> Some Text </blockquote>
You can't include span tag into CSS content property.
The content CSS property is used with the ::before and ::after
pseudo-elements to generate content in an element.
.normal-text{
border-left-width: 1px !important;
font-size: 110% !important;
color: #100cce;
font-family: 'Book Antiqua';
}
.normal-text::after{
content: ' \00270e '
}
<blockquote class="normal-text"> Some Text </blockquote>
I think it will help you.
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
.glyphicon:before {
content: "\e008";
padding-right:10px;
font-size:24px;
float:left;
}
.glyphicon > p {
float:left;
font-size:24px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span class="glyphicon"><p>User</p></span>
i think it will help you. make html as given below and no need to after css
<blockquote class="normal-text"><span class="glyphicon glyphicon-pencil"></span> Some Text </blockquote>
check this link : https://jsfiddle.net/vt3d7pLv/
In case you are using Bootstrap 5 it should be like this:
.normal-text::after {
content: '\F12A';
font-family: "bootstrap-icons";
}
Use the CSS code in the icon detail page as the content.
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;
}
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"; }
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";
}