I am trying to change the content of a span with a Font Awesome icon directly from the CSS page but can't seem to make it work properly.
1) I have imported FA from the documentation and in the <head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
2) My html looks like this :
<span class='myClass'>Movies</span>
3) Let's now say I would like to change the content of the span with an icon directly from the CSS Page.
My css currently looks like this but it isn't working, it gives me a square instead of the icon.
.myClass {
font-size:25px;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: '\f008';
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
<span class='myClass'></span>
Funny thing is that it looks like it is working with some icons. If I test with content: '\f007'; it works. Any idea why?
(And if you wonder why I want to change the icon directly in the CSS, it is because I am using media queries so I can't add it directly in the HTML page)
If you are using the JS+SVG version read this: Font Awesome 5 shows empty square when using the JS+SVG version
You need to add
font-weight:900
.myClass {
font-size:45px;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: "\f008";
font-weight: 900;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<span class='myClass'></span>
The regular version of the icon, defined by the default font-weight, is PRO so it will show an empty square. What you need is the solid version:
https://fontawesome.com/icons/film?style=solid
Why the other icon is working?
Because the \f007 is this icon : https://fontawesome.com/icons/user?style=regular and as you can see, the regular one is not PRO and is included in the free package so you don't need to specify a font-weight. You only need to specify it when you want to show the solid version.
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: "\f007";
visibility: visible;
font-weight: 900;
}
.myClass-1::after {
font-family: 'Font Awesome 5 Free';
content: "\f007";
visibility: visible;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<span class='myClass'>Solid </span>
<br>
<span class='myClass-1'>Regular </span>
As a side note, all the light and duotone versions are included in the Pro package so will always show empty square whataver the font-weight used
You can check the documentation for more details : https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
Related questions
Font Awesome 5 shows empty square when using the JS+SVG version
Font Awesome 5 unicode
Font Awesome 5, why is css content not showing?
from your comment :
Awesome, thanks for the explanation ! Do you know what font-weight I would need to use if the light version would have been free ?
test text-stroke with a transparent color to get a thinner render :
.myClass {
font-size: 45px;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: "\f008";
font-weight: 900;
-webkit-text-stroke;
transparent 0.2em;
}
.myClass+.myClass::after {
-webkit-text-stroke: white 0.02em;
}
.bis {
font-size: 4rem;
color: blue
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<span class='myClass'></span>
<span class='myClass'></span>
<span class='myClass bis '></span>
<u>
<span class='myClass bis '></span></u>
list-style-image: url("../../media/examples/rocket.svg");
source: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image
Related
I have an Angular project with bootstrap 4.4.1, ag-grid 27.3 and a global style.scss file. I'm able to use bs icons by using the css classes in my typescript and html files.
Now i'm trying to change the checkbox font icon in ag-grid, from "\f106" to "\f272" of bootstrap. I see in the browser that the main two css classes involved with the font icon are:
The font-size and content properties specifically affect the icon (in pink by default)
So, I tried setting the icon css code, but no luck, the browser is not throwing an error but it's not showing it either.
Is it even possible to change that font icon? Do I need to import something to the style.scss?
Edit 1:
Tried all the approaches (sass, svg and javascript) from the docs and wasn't able to make work neither.
Sass:
Added
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"/>
to index.html. Already had these imports in my style.scss:
#import "../node_modules/ag-grid-community/src/styles/ag-grid.scss";
#import "../node_modules/ag-grid-community/src/styles/ag-theme-material/sass/ag-theme-material-mixin.scss";
And this for changing the checkbox-checked icon
.ag-theme-material .ag-icon-checkbox-checked {
//tried all 3 combinations of font
//--ag-icon-font-family: 'Material Design Icons';
//--ag-icon-font-family: agGridMaterial;
//--ag-icon-font-family: "agGridMaterial";
--ag-icon-font-code-checkbox-checked: '\f00c';
}
Svg:
.ag-theme-material .ag-icon-checkbox-checked{
background: transparent url("https://www.ag-grid.com/example-assets/svg-icons/menu.svg") center/contain no-repeat;
color: transparent;
}
Javascript (GridOptions or Column Def):
#Input() gridOptions: GridOptions = {
...
icons: {
checkboxChecked: '<i class="bi bi-check2"/>',//boostrap font icon
},
...
}
Have a read of Ag-grid Custom Icon
You can use the custom icon font-family by inserting it in index.html via a <link> and importing it in custom.scss.
Example
index.html
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"/>
custom.scss
.ag-theme-alpine {
--ag-icon-font-family: 'Font Awesome 5 Free';
--ag-icon-font-code-aggregation: '\f247';
--ag-icon-font-code-arrows: '\f0b2';
--ag-icon-font-code-asc: '\f062';
--ag-icon-font-code-cancel: '\f057';
--ag-icon-font-code-chart: '\f080';
--ag-icon-font-code-color-picker: '\f576';
--ag-icon-font-code-columns: '\f0db';
--ag-icon-font-code-contracted: '\f146';
--ag-icon-font-code-copy: '\f0c5';
--ag-icon-font-code-cross: '\f00d';
--ag-icon-font-code-desc: '\f063';
--ag-icon-font-code-expanded: '\f0fe';
--ag-icon-font-code-eye-slash: '\f070';
--ag-icon-font-code-eye: '\f06e';
--ag-icon-font-code-filter: '\f0b0';
--ag-icon-font-code-first: '\f100';
--ag-icon-font-code-grip: '\f58e';
--ag-icon-font-code-group: '\f5fd';
--ag-icon-font-code-last: '\f101';
--ag-icon-font-code-left: '\f060';
--ag-icon-font-code-linked: '\f0c1';
--ag-icon-font-code-loading: '\f110';
--ag-icon-font-code-maximize: '\f2d0';
--ag-icon-font-code-menu: '\f0c9';
--ag-icon-font-code-minimize: '\f2d1';
--ag-icon-font-code-next: '\f105';
--ag-icon-font-code-none: '\f338';
--ag-icon-font-code-not-allowed: '\f05e';
--ag-icon-font-code-paste: '\f0ea';
--ag-icon-font-code-pin: '\f276';
--ag-icon-font-code-pivot: '\f074';
--ag-icon-font-code-previous: '\f104';
--ag-icon-font-code-right: '\f061';
--ag-icon-font-code-save: '\f0c7';
--ag-icon-font-code-small-down: '\f107';
--ag-icon-font-code-small-left: '\f104';
--ag-icon-font-code-small-right: '\f105';
--ag-icon-font-code-small-up: '\f106';
--ag-icon-font-code-tick: '\f00c';
--ag-icon-font-code-tree-closed: '\f105';
--ag-icon-font-code-tree-indeterminate: '\f068';
--ag-icon-font-code-tree-open: '\f107';
--ag-icon-font-code-unlinked: '\f127';
--ag-icon-font-code-checkbox-checked: '\f00c';
--ag-icon-font-code-checkbox-unchecked: '\f00d';
}
.ag-theme-alpine .ag-icon,
.ag-theme-alpine .ag-checkbox-input-wrapper,
.ag-theme-alpine .ag-radio-button-input-wrapper {
/* Font Awesome requires bold on all icon elements */
font-weight: bold;
}
/* selectively replace the group and aggregation icons with Material Design Icons */
.ag-theme-alpine .ag-icon-group {
--ag-icon-font-family: 'Material Design Icons';
--ag-icon-font-code-group: '\F0328';
font-weight: normal;
color: red;
}
.ag-theme-alpine .ag-icon-aggregation {
--ag-icon-font-family: 'Material Design Icons';
--ag-icon-font-code-aggregation: '\F02C3';
font-weight: normal;
color: red;
}
So, on Windows default font family files don't have flag emoij (e.g. 🇺🇸 turns into 🇺 and 🇸). You can add this emoij by defining #font-face.
How do you make that, the fallback family is the previous value? Or how to append it? Or how to do it in general (adding a character to the font-family)?
UPD: Ok, here is an example:
#font-face {
font-family: 'Country Flags';
unicode-range: U+1F1E6-1F1FF;
src: url('https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill#0.1/dist/TwemojiCountryFlags.woff2') format('woff2');
}
*{
font-family: Fantasy;
}
#f{
font-family: 'Country Flags';
}
<p>Windows 🇺🇸</p>
<p id="f">Custom 🇺🇸</p>
Look. Setting font-family: 'Country Flags'; overrides every previous font-family.
You can have a plagin to add CSS, like Stylish.
It adds CSS file to page.
The overriding of previous font-family is a problem, because you break what page is trying to indicate. For example StackOverflow use ui-monospace for editor and -apple-system for normal text.
Again, that's only an example. If there is no why of adding emoij by this kind of plugin, then I will need to make new, more complex, plugin. Do you understand me now?
Just declare two fonts in font-family property?
body {
font-family: a, b;
}
Take a look at the code snippet below, which uses Thai symbols and Thai font for them. But other symbols which are not Thai will use Arial. So in your case just use font-family: Fantasy, "Country Flags";
#import url('https://fonts.googleapis.com/css2?family=Charm&display=swap');
body {
font-size: 20px;
display: flex;
flex-direction: column;
color: black;
}
.arial-charm {
font-family: "Arial", "Charm";
}
.charm-arial {
font-family: "Charm", "Arial";
}
.charm {
font-family: "Charm";
}
.arial {
font-family: "Arial";
}
<span class="arial-charm">Arial + Charm: ฟà¸à¸™!🇺🇸 test</span>
<span class="charm-arial">Charm + Arial: ฟà¸à¸™!🇺🇸 test</span>
<span class="charm">Charm: ฟà¸à¸™!🇺🇸 test</span>
<span class="arial">Arial: ฟà¸à¸™!🇺🇸 test</span>
Default font: ฟà¸à¸™!🇺🇸 test
I am developing my first application at Vue and I must say that I am having a hard time finding practical examples and complete information for all the problems I am encountering.
Right now I'm trying to use an icon font that I've created with iconomoon. I've imported it into my project and I've declared it as a font-face in my style, importing the declaration of the icon I want to test with into the same style.
At first I had a webpack configuration error that I have already corrected, but when I declare my icon in my html template only a box with a border appears but the icon is not shown
Here is my template
<header>
<nav class="navbar navbar-expand-lg navbar-light header">
<img class="logo" src="../../assets/logo.png">
<i class="icon-ic-fluent-home-24-regular"></i>
and here my css
<style>
#font-face {
font-family: "icomoon";
src: url(../../icons/icomoon.ttf) format("truetype");
font-weight: normal;
font-style: normal;
}
.icon-ic-fluent-home-24-regular:before {
content: "\e908";
}
[![project strucutre][1]][1]
</style>
Can someone tell me what my mistake is?
Thank you very much for your time and help in advance
[![the square in the image corresponds to what it shows instead of the][1]][1]
[1]: https://i.stack.imgur.com/btYW0.png
You need to tell the icon to use the font you created:
<i class="icon icon-ic-fluent-home-24-regular"></i>
<style>
#font-face {
font-family: "icomoon";
src: url(../../icons/icomoon.ttf) format("truetype");
font-weight: normal;
font-style: normal;
}
.icon {
font-family: "icomoon"
}
.icon-ic-fluent-home-24-regular:before {
content: "\e908";
}
</style>
This question already has answers here:
Font Awesome 5 unicode
(3 answers)
Closed 3 years ago.
hi I am trying to change my style of the icon from a star with empty space inside to full star
but I can't do in inside the before and after only
.survery-test label:after {
content: '\f005';
font-family: fontAwesome;}
the problem is I can't change the style of the icon to a full star
it's free on font awesome and I can't change it like inside the class.
Solution:
I used another Fontawesome CDN by bootstrap
You will have to change the content of your class
.survery-test label:after {
content: '\f005';
font-family: fontAwesome;
}
.survery-test.empty label:after {
content: '\f006';
font-family: fontAwesome;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="survery-test">
<label></label>
</div>
<div class="survery-test empty">
<label></label>
</div>
I have the following code:
<a href="#home">
<i class="fas fa-chart-bar fa-lg">
<span class="card-text card-textWithIcon">serif font</span>
</i>
</a>
it shows an image and a short text. It works fine but the text is in a serif font. How can I switch to a sans serif font?
I'm using Bootstrap 4 and Fontawesome 5.8.1
Edit 1:
I added
font-family:sans-serif !important
to the .fa class. But then the icon is visible as an rectangle (which is wrong).
Edit 2:
I added two new classes:
.span {
font-family:Sans-Serif
}
.sansserif {
font-family:Sans-Serif
}
and added the .sansserif to the span-element:
<span class="card-text card-textWithIcon sansserif">serif font</span>
But this did not work.
Solution: see second comment from elveti
"You should not add additional content into your icon. Put it afterwards, like serif font – elveti 2 mins ago"
You should use Font Awesome as font family for all i tags then Sans-Sarif for everything else or what you want to use it for
i.fas {
font-family: 'Font Awesome\ 5 Free' !important;
font-style: none
}
* {
font-family:Sans-Serif;
}
Try the below method. You can set the font-family to root element or body tag.
body {
font-family:Sans-Serif;
}
a .fas {
font-family: "Font Awesome 5 Free";
}
.card-text {
font-family: Sans-Serif;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<a href="#home">
<i class="fas fa-chart-bar fa-lg">
<span class="card-text card-textWithIcon">serif font</span>
</i>
</a>