Questions tagged [font-awesome]
Font Fantastic is a legendary independent scalable font, originally created for integration with the Twitter Bootstrap interface framework.
I have incorporated two Font Awesome icons into my design: fa-circle-thin fa-user-plus These icons are stacked to create a circular icon appearance. <span class="fa-stack fa-sm"> <i class="fa fa-circle-thin fa-stack-2x"></i> <i c ...
Is there a way to change the color of the first option in the selection box to grey, similar to the example above? Additionally, how can I create a clickable icon that will display all options? The current setup is not functioning correctly. <div clas ...
I'm looking for a way to vertically align text next to my FontAwesome icons without using manual padding. Is there a better method for achieving this? https://i.stack.imgur.com/PWwSJ.jpg <div class="row"> <div id="tb-testimonial" class="testimon ...
I'm having an issue where adding font-awesome to the style bundle is causing images not to display correctly. Instead of showing the right icon, I am getting a transparent box. My style bundle configuration looks like this: bundles.Add(new StyleBundle("~ ...
I am looking to apply a specific font style to all text on a page except for Font Icons (specifically Font Awesome) which do not share a common class. In order to achieve this, I need to target elements in one of the following ways: Elements that do not ...
Hi there, I am currently working on a project where I want to align font awesome icons to the right of my text within a list. My website is in a Right-to-Left (RTL) language and I can't seem to find any resources on how to achieve this. Any help would ...
Observation: The stars should be displayed using the Font Awesome font. Issue: An error font is being displayed instead of Font Awesome, indicating that it is not being loaded properly. Hello. I am encountering problems with including Font Awesome in my p ...
Currently in my angular 6 project, the parent module utilizes font-awesome 4.7 as shown in package.json; "font-awesome": "^4.7.0", and angular.json; "styles": ["projects/adminUI/src/styles.css", "./no ...
I've been working on a project to create a custom icon class that can load FontAwesome icons, but I'm facing issues with reading the fontawesome-webfont.ttf file. Here is the code for creating an icon: import javafx.scene.control.Label; import ...
I am facing an issue with the code I have below. It changes the font style successfully, but it also causes the icon to disappear. Can anyone provide tips on how to ensure that the icon remains visible while changing the font style? <link rel="styles ...
Can anyone help me figure out how to use fontawesome icons in my material-ui Button component? I've been struggling with this issue and could use some guidance. (I am working with React and react-admin framework.) import '../../../node_modules/f ...
I am attempting to create the div using CSS after pseudo-element and I have included the Unicode in the content with the font family being "Font Awesome 6 Free". However, nothing is showing up and I'm not sure why. Can someone please assist me? Here is my ...
After smoothly using fontawesome for several months without any problems, I encountered an error today while attempting to push my app to production. An unexpected error occurred: "https://npm.fontawesome.com/@fortawesome/fontawesome-pro/-/6.1.1/fontawesom ...
When it comes to single-input forms in Bootstrap 4, a convenient method for incorporating font-awesome icons is by utilizing the input-group-addon class: <div class="input-group"> <span class="input-group-addon"> <i class="fa fa ...
Currently utilizing angular-fontawesome, I am seeking to alter the background color of a font-awesome fa-icon <fa-icon class="vue-icon" [icon]="faVue" ></fa-icon> To change the color, I modified the CSS using ...
Trying to vertically align multiple font awesome icons: ############################# icon icon icon icon icon icon ############################# <div class="announcement-card-body modal-body card border-0"> <span class="info fa fa-info- ...
I recently integrated the new bootstrap icons npm package into my project using Gulp 4, the latest version. Everything was installed successfully and was working smoothly. However, I encountered an issue when trying to declare the icon in my index.html fi ...
Hello everyone! I am new to coding and I have a question for the Stack Overflow community. I am trying to customize the color of my Font Awesome icons on the homepage of my WordPress theme (Arcade Pro) using the custom CSS editor. Can anyone provide me w ...
Hey there! I've come across this error in the console while attempting to utilize Bootstrap. It seems that a style is being refused from 'http://127.0.0.1:5500/node_modules/font-awesome/css/font-awesome.min.css' due to its MIME type ('t ...
When utilizing a REST service, I wanted to implement a variable to show whether the service is currently loading or not. Controller $scope.loading = true; $http.get('/Something'). success(function(data, status, headers, config) { ...
I am working with 3 different files: index.html <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="style.css" /> </head> <body> <i class="logo myRed" aria-hidden="true"></i> ...
My assignment involved creating a function that retrieves Bitcoin trades from a JSON URL, allows users to change the interval with buttons, uses fontawesome arrows to indicate rate changes (up/down/no change), and displays the data on a website. Everythin ...
I'm struggling to figure out why I can't change a font awesome icon using a toggle. I've tried various solutions but nothing seems to be working. Any insights on what might be causing this issue? (HTML) <span class="toggle-icon" ...
Hey there, I'm a TypeScript newbie and looking to incorporate FontAwesome icons into my Vue 3 App. Here's the setup: Here is my main.ts : import Vue, { createApp } from 'vue'; import './registerServiceWorker'; import { librar ...
I'm encountering a problem with Webpack and FontAwesome. These are the loaders I am using: module: { loaders: [ { test: /(.js$)|(.jsx$)/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /(.jade$)/, exclude: /node_modules/ ...
In my development setup, I have a react component that is embedded within two distinct applications each with their own webpack configurations. Within the component, I am utilizing a FontAwesome icon using the react-fontawesome library: <FontAwesom ...
LocationSearchComponent.js I'm having an issue with empty icon showing as const LocationSearchComponent = () => { return ( <Form className="locationForm"> <Form.Group> <Form.Contro ...
Seeking guidance on updating our project to use the latest Macadmine theme. The transition from Font Awesome 3 to Font Awesome 4 requires changing all icons to their proper names. I came across a helpful resource at https://github.com/FortAwesome/Font-Aw ...
Currently working on a React project and wondering if it's advisable to incorporate FontAwesome icons in a MaterialUI-based ReactJS application. Experimented with both Material UI Icons and FontAwesome Icons, but noticed some redundancy. ...
Utilizing both Vuetify and font-awesome icons has been a successful combination for my project. However, I am facing an issue where the 'fa-folders' icon is not displaying as expected: In the .ts file: import { library } from '@fortawesome/ ...
Recently, I've been experimenting with MUI and Font Awesome. Font Awesome makes it easy to use a ternary operator to display a specific number of stars based on a rating value. For example, if an object has a rating of 4.5, it will show 4 and a half star ...
I've integrated font-awesome-rails into my Rails project. When a user clicks the submit button on a form: The submit button should display an animated font-awesome spinner and change text to "Submitting...". The button must be disabled to prevent m ...
Instead of directly linking to the Font Awesome CSS, I have chosen to leverage the JavaScript provided by the trustworthy and efficient Font Awesome CDN. This allows for asynchronous loading of icons on my homepage, ensuring a seamless user experience. How ...
I recently encountered an issue while trying to utilize font-awesome with npm. The newest version (>4) made it challenging to locate the fonts directory. Previously, I used a npm script similar to cp -R ./node_modules/font-awesome/fonts/* dist/assets/. Ho ...
Looking to incorporate fontawesome into my nextjs 13 project, I've been experimenting with various solutions. Tried implementing solution #3 from an old post as well as following the guidelines provided in the fontawesome documentation. Starting out with n ...
I have a problem with a font-icon animation code. When I run it on my local server, the animation doesn't work. It only works on http://codepen.io/TimPietrusky/pen/ELuiG I even tried running it on http://jsfiddle.net/qjo7cf3j/ @import url(http://wel ...
I am in the process of developing a versatile component that allows me to input the href, target, and rel attributes, along with specifying the FontAwesome Icon I want to utilize. My goal is to be able to pass multiple icons into this list, which will then ...
I am trying to align the text of my list items to the left. Here is what I have currently: https://i.stack.imgur.com/a5o5e.png Is there a way to left-align the text in this code snippet? import React from 'react'; import PropTypes from 'p ...
I am looking to incorporate a spinning font awesome cog while the data is being fetched and remove it once the process is complete. Here is the HTML snippet that needs to be inserted: <i class="fa fa-spin fa-cog"></i> And this is the accompa ...
I am currently developing a Rails app that utilizes hypernova-vue to integrate Vue3 micro frontend apps/components across the site. I have created a small npm library containing components that are used by the Vue component micro frontends. However, after ...
Utilizing Font Awesome Icons within the li elements of a ul Challenge When a user clicks on the user icon, the color changes from black to yellow. If the user clicks on another icon, that one also turns yellow. Is there a way to remove the existing yell ...
I have been attempting to adjust the position of a font awesome icon within an input field dynamically. My goal was to have the style calculated at runtime, similar to how I've handled other stylesheet elements in the past. However, I am facing difficultie ...
Is there a way to group 2 icons together and display them one above the other? I attempted to use the fa-stack class, but the images are overlapping. How can I achieve this layout? <span class="fa-stack fa-lg"> <i class="fa fa-envelope fa-stack ...
I recently updated my app from Fontawesome version 4 to 5 by following the guidelines provided HERE. Everything looks great and appears to be working smoothly, except for the dynamic icons... In my Angular-based app, the icon to display is often dynamic: ...
I am facing an issue with my main container where I have two items placed on the same line. Item 1 is an image linked to a URL and it should be positioned at the far left of the container. On the other hand, item 2 contains a font awesome icon that needs t ...
Currently, I am in the process of transitioning my project from utilizing bulma + jQuery to buefy. The resources I am loading include buefy, vue, and font awesome from a CDN. However, despite specifying the defaultIconPack as 'fas' for font awesome, the ic ...
I am working on a project using ASP.NET Core v2 and I want to incorporate font-awesome into my webpage. I've tried multiple methods, such as installing Bower from NPM, installing font-awesome from NPM, and even trying to install it from Bower packages in ...
I would like to align the text of my list items to the left. Additionally, I want all the icons to be the same size as the envelope icon used in Gmail list item. Currently, my code looks like this: https://i.stack.imgur.com/9LNOs.png How can I achieve th ...
Currently, I am integrating FontAwesome into my NextJS project with Tailwind CSS. Following the official documentation, it instructs to add the given code snippet to _app.tsx file: import { config } from "@fortawesome/fontawesome-svg-core"; impor ...
Is there a way to incorporate fontawesome into PDF files? I currently generate my PDFs using the PHP library FPDF and font embedding, but I am having trouble getting it to work. I found this tool that generates AFM files: Despite trying to use fontawesom ...
I'm attempting to incorporate FontAwesome icons into CSS pseudo elements. When I add the icon using HTML in the traditional manner, it works fine. However, I'm trying to integrate the fonts into a bootstrap accordion so that the icon changes whe ...
After installing react-create-app using npm, I also added react-fontawesome. Now, I'm wondering how to include the css styles of fontawesome in my project? Here is a glimpse of my work space: https://i.stack.imgur.com/pM1g1.png ...
Currently, I am in the process of working on a node.js project utilizing OpenShift. Everything is running smoothly except for the fact that I keep encountering a 404 error with my font awesome files. Upon SSHing into the system, I can see... ls app-deploy ...
After setting a border color to my button, it's not displaying the color when I click on it. Instead, it's showing a different color. How can I resolve this issue? I need some assistance with setting the background of my button to match the imag ...
Can someone help me with styling my code? I want to display a text message inside a square box with dimensions of 1x. <span class="fa-stack fa-5x" style="margin-left:5%"> <i class="fa fa-square-o fa-stack-2x"></i> </span> ...
I am facing an issue while trying to insert an icon into a select option. The error message I received is: Warning: validateDOMNesting(...): cannot appear as a child of <option> To indicate that certain fields are required, I am using asterisk ic ...
Has anyone else encountered this issue before? If so, what was the solution? I'm facing difficulties when trying to install fontawesome using npm. While all my other packages are installing successfully, I keep running into errors specifically with font a ...
Within the Head component of my Next.js project, I have included this CDN code: <script src="https://kit.fontawesome.com/fbadad80a0.js" crossOrigin="anonymous" ></script> To utilize the icon in my project, I have im ...
"@fortawesome:registry" "https://npm.fontawesome.com/" "//npm.fontawesome.com/:_authToken" "XXXXXXX-my-token" I am currently working on setting up the .yarnrc configuration for my project, but I'm uncertain about the correct file format. Does the abo ...
const toggleDarkOrLight = document.getElementsByTagName('i')[0]; var toggled = false; const toggleFunction = () => { if (toggled === false) { toggleDarkOrLight.classList.remove('fa fa-toggle-off'); toggleDarkOrLight.classList.add('fa fa-toggle ...
Font Awesome is working perfectly for me, but I'm experiencing an issue with strange borders appearing around the icons in Chrome. Interestingly, this problem doesn't occur in IE and Firefox browsers. What's even more peculiar is that the bo ...
So I have a button that, when clicked, displays a list of data. I am adding a unique font awesome icon in there if the JSON key value exists. However, here lies the issue. The particular key happens to be a date. I need my ng-show function to check whether ...
Is there a way to customize the color of a font awesome icon using CSS? I've tried changing the color of everything except font awesome icons with this code: ::selection{ background: #ffb7b7 !important; /* Safari */ } ::-moz-selection { back ...
Below is the code I am using: <div style="width:60px; height:60px; background-color: lightgrey;"> <a class="" href="javascript:void(0)" style="color: black; width: inherit; height: inherit;"> <i class="fa fa-lg fa-play" aria-hidden="t ...
<i class="fa fa-graduation-cap" aria-hidden="true" style="font-size: 50px;"></i> It's functioning properly. .fa-graduation-cap { margin-top: 38px; color: #E46A6B; font-size: 50px; } Not working too well. This issue is new to me. Any th ...
I've noticed a strange issue on my website where the font awesome icons sometimes display as squares instead of their intended design. After searching through forums, it seems that my situation is different from others experiencing similar problems. I ha ...
The process of installing the pro version of Angular Font-awesome began with setting up my registry using these commands: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ && \ npm config set "//npm.fontawesome.com/:_authTo ...