Questions tagged [font-awesome]
Font Awesome is an iconic standalone vector font, initially developed for use with the Twitter Bootstrap front-end framework.
5,589
questions
0
votes
3
answers
42
views
HTML/CSS - Font Icons : Class from fontawesome not working when calling it from css file
I'm pretty "new" to HTML/CSS coding so apologies if this topic is trivial.
This concern the use of font icons, more precisely Fontawesome.
HTML FILE : In my html document, the icon is ...
0
votes
0
answers
18
views
FontAwesomeIcon with Nuxt 3 raises two lint errors in my code
I am using Nuxt 3 and want to have fontawesome. It actually works, but I have some lint errors that I am not getting rid of and I want to understand if I did something wrong or not.
Here's part of the ...
0
votes
0
answers
43
views
Can't import custom fontawesome web icons in Flutter
Creating a custom icon on fontawesome using the icon wizard does not generate the custom icon code after importing the new web files (the icons.json and the custom .tff file).
I made a new icon using ...
0
votes
2
answers
58
views
Getting in `require': cannot load such file -- ffi (LoadError) after installing gem 'font-awesome-sass', '~> 4.7.0'
Im using windows. I wanted to include font awesome icons to my project and so I added gem 'font-awesome-sass', '~> 4.6', '>= 4.6.2' to my gem file did a bundle install and got this:
Fetching ...
0
votes
1
answer
39
views
Add fontawesome to shadowroot of webcomponent
I've created a JS script that creates a webcomponent. That webcomponent used Font Awesome icons. When I include the Font Awesome library to the head of my HTML, the icons work without any problems. ...
0
votes
0
answers
16
views
how to create a SharePoint modern list with links to external sites with icons
I'd like to have a list of external URLs and also use font awesome icons in front of each of them. I first created a list with a link and an icon, but I don't think this is correct, and it just doesn'...
0
votes
0
answers
16
views
FontAwesome half animation?
I'm currently trying to use their animations to make a transition animation. For example, if I press a button, I want it to play the first half of the shake animation with the snowflake icon, swap to ...
-4
votes
1
answer
37
views
font awesome icon displayed as a square [closed]
I wanna make an icon for my sidebar using font awesome, but the icon turns to a square.
I can use cdn, but i wanna try offline. I put my all.min.css in css folder in public folder
enter image ...
1
vote
0
answers
25
views
Can't use data for fontawesome icons in vue
Here I am trying to get individual icons for subclasses here
<v-col v-for="sub in subclasses" :key="sub.sub">
<div class="d-flex justify-...
0
votes
0
answers
15
views
Is there a way to check which domain is accessing my FontAwesome kit?
Today, out of nowhere, I received an e-mail from FontAwesome warning me that my kit has received over 60% of my allotted 10,000 pageview limit for this month.
Problem is, I don't even know where are ...
0
votes
0
answers
26
views
Fontawesome icons displayed incorrectly in pyplot
I've got some pyplot charts with annotations using fontawesome icons.
Everything worked fine in the past until I was required to update my Python Interpreter from 3.10 to 3.11.
Now e.g. a simple left-...
0
votes
0
answers
30
views
FontAwesome 5 doesn't show in Chrome when css-called, but shows in Safari
On the site <www.lichaamengeest.be> there is use of FontAwesome 5.15.4. All icons show well, except for the ones that are called from the css, like "\f104", "\f0dd", "\...
0
votes
1
answer
32
views
Problem with FontAwesome font-weight when using fa-regular
Chrome 115 and 117 (also in Edge)
fa-solid displays ok but regular display as square
here how it look like
when trying to play with font-weight in the DevTool its look like the browser cant display ...
0
votes
0
answers
22
views
How to get icon name fontawesome from image png
I have some image png, I want to get icon name of image.
How to get it?
I tried using Bard to get the icon name but it didn't work
0
votes
1
answer
20
views
Social Menu Icon issue - no hyperlink when adding class
I'm using my own infinity news child theme on littleseabear.com. infinity news uses ion icons and for the icon to appear in the social menu the css goes something like:
social-icons ul a[href*="...
0
votes
1
answer
43
views
How to implement dynamic icon loading in remix.js?
I would like to use some icon library in remix.js. As remix doesn't use babel it is not possible to use dynamic import of the icons. What is the easiest way to implement fontwaesome or remixicons with ...
0
votes
0
answers
28
views
How to import icons from FontAwesome and shake all the unused ones?
Our current implementation loads all of the icons into the font awesome library:
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/pro-solid-svg-icons';
...
0
votes
1
answer
64
views
Difficulty Positioning Elements in CSS with position absolute & relative
I'm currently working on a project where I'm trying to adjust the positioning of elements within a sidebar. The sidebar contains Font Awesome icons and corresponding text elements, and I'm attempting ...
0
votes
0
answers
18
views
Why does this technique for using fontawsome 5 in text on a canvas fail for icon fa-plug when it works for fa-amazon?
This is about using Fontawesome icons in text on a html5 canvas. Why will the technique NOT work with the fa-plug icon when it does work with the fa-amazon icon.
The code is in the snippet below but ...
0
votes
1
answer
32
views
Font Awesome icons not displaying despite local hosting and CORS fix
I'm encountering an issue where Font Awesome icons are not displaying on my live web server despite hosting the Font Awesome files locally. I initially faced a CORS issue, which was resolved by local ...
0
votes
1
answer
37
views
vertical alignment of google-material-icons when replacing fontawesome icons in a bootstrap page
I have an html page, that uses bootstrap 5.3 for layout (e.g. buttons) and fontawesome 6.4 for icons. Both bootstrap and fontawesome are included via a CDN.
I want to transition to the latest google ...
0
votes
0
answers
18
views
Bulma + Font Awesome Just Displays a Hex Value
I am using bulma as my default css framework.
I used npm to download fontawesome-free.
I have included it into a global scss that compiles to css on build.
I follow the Bulma instructions here : https:...
0
votes
0
answers
25
views
TinyMCE custom button with font awesome 6 icon
I am trying to add a custom button to TinyMCE which has font awesome icon on it.
In the page header I am referencing my fa kit
<script data-search-pseudo-elements src="https://kit....
0
votes
1
answer
53
views
Font awesome 6 icons not showing afte Vite build
I have a new laravel project and imported Font awesome 6 using npm.
When i run "npm run dev" all icons show up, but after running "npm run build" I get 4 console errors that the ...
0
votes
0
answers
31
views
after linking to font Awesome link works well if i use @font_face but if not it shows a weird link. i cannot seem to understand the problem
i am trying to add an icon from font_awesome
i followed the manual and took the link tag to the libary from https://cdnjs.com/
i have some old code defining specific certain icons using @font_face , ...
0
votes
1
answer
115
views
Inject Font Awesome token as build secret to .npmrc via Dockerfile from GitHub secrets
We currently use the Font Awesome library for fonts and icons in our application. It's registered inside the the .npmrc file as below:
@fortawesome:registry=https://npm.fontawesome.com/
//npm....
0
votes
0
answers
32
views
Font Awesome icon borders changed size from v5 to v6
I thinking about upgrading FA from version 4 to version 6. The size of the borders of icons is unexpected in version 6, so the placement of the characters is shifted in my app. The v6 borders are the ...
0
votes
0
answers
19
views
My question is why font-awesome icon was not working properly
This is font-awesome icon
hi there give me the solution of this problem, why font-awesome icon was destroy every time and how to solve this problem so please give me the solution thank you so much .
I ...
0
votes
2
answers
184
views
How to add a fontawesome icon in html according to the value of an input
Sorry if my question seems stupid as I am a total newbie.
I'm stuck with the following problem.
I need to add a fontawesome icon as the content of an input text according to a very simple condition ...
0
votes
1
answer
21
views
How do I add FontAwesome to Vue/Express/hypernova-vue app
The app I'm working on is a Rails app using hypernova-vue to allow Vue3 micro frontend apps/components to be used throughout the site. I've built a small, private npm library of components used by the ...
0
votes
0
answers
1k
views
Twitter X using Font Awesome 6 not working
Why does the Twitter X icon not work in this code using Font Awesome 6? Any help is appreciated.
This is the link to the Font Awesome 6 Twitter X details: https://fontawesome.com/icons/x-twitter?f=...
0
votes
1
answer
36
views
Use font awesome icon in nuxt watcher
In my nuxt component, I know I can use the following to display an icon from Font Awesome:-
<fa icon="circle" />
But what do I need to do to use the same icon when I'm building HTML ...
1
vote
0
answers
14
views
React Native 'npm run ios' hanging after installing FontAwesome
I'm a React Native newbie and am working through a React Native Course on Udemy. I installed FontAwesome into my RN project (which is from the out-of-the-box setup of RN), and now when I run the npm ...
0
votes
1
answer
112
views
How do I display font awesome v6.4.2 brand icons in angular?
It is a fresh project with angular and font-Awesome.
I am missing something not sure what it is.
The imports and adding the reference.
Version of Fontawesome
"@fortawesome/angular-fontawesome&...
1
vote
1
answer
52
views
My fontawesome and bootstrap icons dont show up in azure
I use express and html to run an html file, and normally the icons show up very good if i run it myself on my own port, but if i for some reason run it on azure, the icons just show up as little boxes,...
1
vote
1
answer
82
views
How use Your Kit custom fontawesome icon in angular project
I have a fontawesome subscription (paid plan) and I have created a few custom icons. Now, I want to know that how to use them in my angular app. This is my package.json file dependencies.
"@...
0
votes
1
answer
35
views
Align normal icon with stacked icon and the same size
I have two icons where I want to align them with the same size. Expected results:
Current development:
If I try to set the stack icon small, it looks like this:
So, I want to have them aligned. ...
1
vote
3
answers
44
views
Button hover effect not affecting icon inside button
I'm trying to show underline effect on button with font-awesome but I want to affect both text and icon but it affects only text inside button ignoring icon completely (as in example). Is there any ...
1
vote
1
answer
44
views
Font Awesome loading icon doesn't show up in WooCommerce Admin list
Based on Custom input fields to update stock quantity in WooCommerce Admin Product list previous answer to one of my questions.
The following code adds a custom button for the quantity column that ...
0
votes
0
answers
20
views
Font-awesome animation not working via RDP
Our users connect to some rdsh Windows servers and are using mstsc to connect on them
Each time they log into the farm, the "Play animations in Windows" is disabled by default.
The user can ...
0
votes
2
answers
64
views
Unable to rotate font-awesome icon in Angular 15 with CSS
I'm trying to get a button with an fa-icon to rotate 180degrees and then rotate backwards the other way when it's clicked again. So far I have this (reproduced in the stackblitz), but the icon just ...
0
votes
1
answer
36
views
Invert plus circle font awesome icon colors
I want the font awesome icon as the following image:
So I try to add that as the following code:
.custom-icon {
position: relative;
color: #a3a1a1;
font-size: inherit;
}
.custom-icon::...
4
votes
2
answers
3k
views
Strange error in console after installing Font Awesome 4
I have installed FontAwesome 4.7 without any file changing. Works alright. But why Firefox shows these strange warnings? There are a lot of them. Can't understand what is wrong.
<link rel="...
0
votes
0
answers
82
views
Fonts in MAUI custom controls
I'm trying to create a MAUI custom control that uses Font Awesome in a separate project (library). I'm not sure where I have to register the font or it must be deployed separately from dll/project and ...
0
votes
0
answers
92
views
Adding fontAwesome to wpf
I installed the Font-awesome-wpf package via the NuGet Package Manager, am trying to add an the exchange icon with the code below
<fa:ImageAwesome Icon="Exchange" Width="30" ...
1
vote
3
answers
103
views
Html icon not showing in chrome
I already link a font awesome cdn link in head but I can't find icon.
Someone help me I want menu icon to do responsive website.
What should I do? I also open in Firefox. Icon also not showing there. ...
0
votes
0
answers
25
views
CSP hash values for external files which change - hash no longer valid
I have recently been tightening up the content security policies for one of my sites. This site uses font awesome for its icons.
As part of this, I've included https://*.fontawesome.com/ under several ...
1
vote
1
answer
105
views
Issue with TinyMce and Fontawesome icons on Moodle platform. Icons does not appear
Since a long time we used Atto as text editor on Moodle.
On the footer we use fontawesome icons for social media links.
This is the code we mostly used with Atto.
<div style="text-align:center;...
1
vote
1
answer
85
views
Difficulty getting the Font Awesome Brand icons to show up
I am trying to get a Font Awesome GitHub icon to show up on the client side, but it doesn't show up. I am using next.js, tailwind, and react.js to build my first portfolio. I have got the following ...
-1
votes
1
answer
139
views
Problem sizing the icon from font awesome using react + tailwind + next.js
I've been trying to learn react and tailwind and for some reason I can't size the icon from font awesome. I tried to do everything in my power, using the size="sm" and h-px w-px from ...