load font-awesome icon in ::before and ::after pseudo element [closed] - html

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I can't load icons from font awesome in pseudo-element. I tried to follow the docs but it didn't work.
.x::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
}
.x::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}
<p class="x">hello, my name is john</p>

Adding the font-awesome stylesheet to your code and it will load the icon.
.x::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
}
.x::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"></link>
<p class="x">hello, my name is john</p>

I think you haven't installed fontawesome kit in your html.
please go here and enter your email address. They will send a verification email and then you will be provided to a link where you will find the <script> tag provided by them. copy and paste that in your html file.

ok this problem is really easy to solve:
First thing you have to create a span tag between the tags:
Correction: no need for span tag.
<p class="icon-classname">hello, my name is john</p>
Also another thing you have to remember is to use the link for the font-awesome in your HTML file with this link:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css"></link>
and in the css file:
icon-classname::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}
You do not need span tag to use the font-Awesome, probably the only thing that was missing in your code is the link from font-awesome.

You should probably explore this article
Sometimes the problem is simple ::before vs :before
I recommend that you try using :before. Everything else points out that your code should be working fine.

Related

Font Awesome unicode "\f046" not showing in Chrome

I am trying to use Font Awesome Unicode (https://fontawesome.com/v4.7.0/icon/check-square-o) on my webpage.
but it is showing as below.
I spend a lot of time searching for the reason why Unicode not showing in Chrome on the internet. but still no luck.
.myClass {
font-size: 45px;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f046";
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<span class='myClass'>Hiiii</span>
As explained in this page, the icon you are search for is \f14a
https://fontawesome.com/icons/check-square?style=regular
It says:
This icon replaces Font Awesome 4's fa-check-square-o
Note that the link you shared is for Font Awesome 4, but in the HTML you used the version 5.
There is no icon with value /f046 that you can use as a pseudo-element. Check this cheat sheet for the icons you can use:
https://fontawesome.com/cheatsheet

Font Awesome: Duotone only appearing half the time

I have a Font Awesome Pro license. Most of the icons show up, no problem, as you can see here: https://ruthannereid.com
Specifically, I use the Duotone books icon in my menu (screenshot): https://i.imgur.com/n3xoiDR.jpg
I want that same icon here (screenshot): https://i.imgur.com/8jXfyAQ.jpg
Weirdly, when I add font-family: "Font Awesome 5 Duotone" in the CSS, the icon breaks spectacularly (screenshot): https://i.imgur.com/GUK4yIq.jpg
I would love some help on this. I don't know if I need to do a PHP trick or what, but I'm willing to try any kind of code (hopefully CSS).
P. S. I've tried to add the "fa" and "fad" CSS specifications to the site::before icon manually, but it didn't fix this.
Current CSS:
.error404 .site-inner::before,
.page .site-inner::before,
.single .site-inner::before {
content: "\f5db" !important;
font-family: "Font Awesome 5 Pro" !important;
font-weight: 900 !important;
background: none !important;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
font-size: 80px;
color: var(--fa-primary-color,inherit);
opacity: 1;
opacity: var(--fa-primary-opacity,1);
}
When using the unicode approach rather than the class name approach there are a few gothchas and I am not sure which way you want to work. If you are using the Font Awesome 5 Pro font rather than the Font Awesome 5 Duotone font you need to make sure you specify the primary and the secondary unicodes. At the moment you are only seeing half the icon because you have only specified the primary layer of the icon.
If you take a look at the books page you will see there is a second unicode of 10f5db which I have highlighted in the screenshot below:
To also display the secondary layer you can add the following :after code alongside your original :before code
.error404 .site-inner::after,
.page .site-inner::after,
.single .site-inner::after{
content: "\10f5db" !important;
font-family: "Font Awesome 5 Pro" !important;
font-weight: 900 !important;
background: none !important;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
font-size: 80px;
color: var(--fa-primary-color,#fff);
opacity: 1;
opacity: var(--fa-primary-opacity,1);
}
I have not tested this solution because our Pro account does not have SO on the whitelist but am confident it should work. If it does not then please give me a shout and I will test it on one of our whitelisted domains for you.
If you are using the Font Awesome 5 Duotone font then you can specify the --fa-secondary-color as well as the --fa-primary-color.

custom text css not taking

I am trying to get this specific text I downloaded to take in CSS. I have other fonts that are working. I had to create an image of the text for the H2 line. I want p to have the same text. I would like both of them to work without having to create a png image to have the text I want. I have the text file uploaded into my public folder. This is my CSS code:
p{
padding-top: 30px;
padding-right: 20px;
font-family: "Paper Daisy";
src: url("img.paperdaisy.ttf");
font-size: 20px;
}
Please create your custom font like this
#font-face
{
font-family:yourfontname;
src:url(specify url here) ;
}
Then use the font family u specified whereever u want to.
First of all I'd love to recommend using Google Fonts (https://fonts.google.com/). It's super-easy to use them on your website. You can just choose a font and then use it like this:
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
Suddenly Paper Daisy is not avaible on Google Fonts, so you'll have to "instal" it to you website. You can find an answer to "How to do it?" on w3schools.com (https://www.w3schools.com/css/css3_fonts.asp).
In your CSS file you use:
#font-face {
font-family: Paper Daisy;
src: url(LINKTOFONT.ttf);
}
And then in the page you want font to work on:
p {
font-family: Paper Daisy;
}

Text-transform won't change as well as the font

I have a WordPress site here: http://www.iliveaccountable.com/
That I want to change the first element "iLiveAccountable" to font family to CaviarDreams_Italic.ttf and change the text-transform into "none" so that it will follow the exact text.
I place all my fonts on a folder and added this code on my style.css sheet and tried to play it using the inspect element since I am only targeting the first element in the navigation:
#font-face {
font-family: Caviar Dreams;
src: url(http://www.iliveaccountable.com/wp-content/themes/unicon/fonts/CaviarDreams_Italic.ttf);
font-weight: normal;
}
li#menu-item-15113{
text-transform: none;
font-family: Caviar Dreams;
}
For some reason I can't still change the font family as well as the text-transform. Any idea what I am doing wrong here? I really need to change it.
Try using
#menu-item-15113 a{
text-transform: none;
font-family: Caviar Dreams !important;
}
The "a" tag has its own font which is "Montserrat" thats why you can't change them via "li" tag only.

How do I change my list item style with a foundation icon?

I've downloaded a set of foundation icons but I'm having a hard time finding documentation on how to use this icons in my css code.
I know I can use it in my markup as so:
<i class="fi-check"></i>
but I want to include it in my css file
#import url("foundation-icons/foundation-icons.css");
and start using them here. for example I want to change all the list item styles to be checkmarks. Basically what I want is:
.myClass li { list-style: fi-check; }
Is it possible to do this somehow?
It would be easiest to use them in your markup as you've pointed out.
<i class="fi-check"></i>
However if you want to recreate this for your own custom style you'd have to recreate/change the css rules found in foundation-icons.css
First you'd need to pull in the #font-face:
#font-face {
font-family: "foundation-icons";
src: url("foundation-icons.eot");
src: url("foundation-icons.eot?#iefix") format("embedded-opentype"),
url("foundation-icons.woff") format("woff"),
url("foundation-icons.ttf") format("truetype"),
url("foundation-icons.svg#fontcustom") format("svg");
font-weight: normal;
font-style: normal;
}
Then you'll need to add it to your custom css like so:
.myClass li:before {
font-family: "foundation-icons";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
display: inline-block;
text-decoration: inherit;
content: "\f126";
}
The last line references the check icon in the foundation-icons file. So, if you wanted to change the icon to something else you'd need to look through foundation-icons.css to see what code to put into the content section.
For example:
trash = content: "\f204";
stop = content: "\f1ef";
Hope this makes sense!