I had the same problem. Read their Readme.md, and you see that there is this note: Note: This component does not include any of the Font Awesome CSS or fonts, so you’ll need to make sure to include those on your end somehow, either by adding them to your build process or linking to CDN … Read more
This worked for me: Add the following lines to your web.config <system.webServer> <staticContent> <remove fileExtension=”.woff”/> <mimeMap fileExtension=”.woff” mimeType=”application/x-font-woff” /> </staticContent> </system.webServer> You have to add these lines because by default Apache is not configured with .woff as a default MIME-type. Apache default MIME-type This holds for IIS as well. As Seb Duggan explains here:IIS default … Read more
Got it! Create a canvas Draw the fa icon on it Change it into a base-64 image url Apply the image on the cursor css style And I made a demo: http://jsfiddle.net/rqq8B/2/ // http://stackoverflow.com/questions/13761472/how-to-render-glyphs-from-fontawesome-on-a-canvas-element // http://stackoverflow.com/questions/13932291/css-cursor-using-data-uri $(function() { var canvas = document.createElement(“canvas”); canvas.width = 24; canvas.height = 24; //document.body.appendChild(canvas); var ctx = canvas.getContext(“2d”); ctx.fillStyle = … Read more
import { FontAwesomeIcon } from “@fortawesome/react-fontawesome” import { faFacebook } from “@fortawesome/free-brands-svg-icons” const icon = <FontAwesomeIcon icon={faFacebook} /> I found the spelling/casing of the brand icons on FontAwesome’s GitHub
if you want a 5x icon size you need to pass it to the react class as size // Font awesome pixel sizes relative to the multiplier. // 1x – 14px // 2x – 28px // 3x – 42px // 4x – 56px // 5x – 70px <FaFolderOpen size={70} /> if you notice it jumps … Read more
In my project (HTML Starter with webpack 4.26.1) I added FontAwesome via two variants: 1. Installed and added I just installed FontAwesome Free (v5.5.0) npm install –save-dev @fortawesome/fontawesome-free and I added to index.js import ‘@fortawesome/fontawesome-free/js/fontawesome’ import ‘@fortawesome/fontawesome-free/js/solid’ import ‘@fortawesome/fontawesome-free/js/regular’ import ‘@fortawesome/fontawesome-free/js/brands’ Source code / Commit 2. Used with the API / SVG I installed FontAwesome … Read more
UPDATE 2021-05-02 This answer remains questionable – see the comments below. I no longer have access to a private ($paid) npm account anymore, so I can no longer test to answer questions. Perhaps try @konyak’s answer. It is definitely NOT a safe behavior to put the token in any git checked file, including .npmrc. Below … Read more
You could toggle which one’s shown on hover: HTML: <a href=”#” class=”lock”> <i class=”icon-unlock”></i> <i class=”icon-lock”></i> </a> CSS: .lock:hover .icon-unlock, .lock .icon-lock { display: none; } .lock:hover .icon-lock { display: inline; } Or, you could change the content of the icon-unlock class: .lock:hover .icon-unlock:before { content: “\f023”; }
Font-Awesome icons, as the name suggests, are font-based. This means to decrease their size all you have to do is decrease their font-size: .fa { font-size: 12px; }
In your test spec file it needs to be set up like this: beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ yourcomponent ], schemas: [NO_ERRORS_SCHEMA] }) .compileComponents(); })); Notice the schemas property in the TestBed.configureTestingModule method. After setting the schemas property your tests should run without error as before you added Font Awsome component.