font-awesome-5

I am trying to toggle a Font Awesome icon by clicking on a to-do list item. Here is the entire component... import React from 'react'; import './TodoItem.scss'; class TodoItem extends React.Component { constructor(props) { super(props); this.state = { complete: false } this.toggleComplete = this.toggleComplete.bind(this); } toggleComplete() { this.setState(prevState => ({ complete: !prevState.complete })); } render() { const incompleteIcon = <span className="far fa-circle todo-item-icon"></span>; const completeIcon = <span className="far fa-check-circle todo-item-icon"></span>; return ( <div

I'm looking to be able to switch between icons in Javascript while using the new FontAwesome SVG framework. Previously in the old WebFont method, this was achieved by toggling or changing the class on the tag, however as these are now rendered as SVG's in the source code this no longer works. Is there a way to do this without needing to render both SVG icons in source code and using additional classes/CSS to toggle display? Pascal Font Awesome 5.0.0 has just been released and the migration from 4.7 to 5.0 wrecked up my javascript/jquery to change a "fa-star-o" icon to "fa-star" when the user

I'm trying to bundle only required Font Awesome 5 icons via webpack, but the icons are not replaced in the DOM. I've added all required packages from the documentation : yarn add -D @fortawesome/fontawesome yarn add -D @fortawesome/fontawesome-pro-solid yarn add -D @fortawesome/fontawesome-pro-regular yarn add -D @fortawesome/fontawesome-free-brands The following custom JS is included: "use strict"; import fontawesome from '@fortawesome/fontawesome'; import faCheck from '@fortawesome/fontawesome-pro-regular/faCheck'; fontawesome.icon(faCheck); function iconsDoneRendering () { console.log(

In font awesome 4 you could easily apply an icon to a :before/:after element using CSS. Is the same possible with the new font awesome 5 JS/SVG implementation? As from what i can see this requires the relevant tag to exist in html which isn't always practical e.g. you have a CMS and want to apply an icon to all user created content <li> elements I know in FA5 you can still use the old css/webfonts but it would be nice if the same functionality was available in the recommended method of using JS You need to enable it (it's disabled by default). <script> window.FontAwesomeConfig = {

In the following example, the initial icon renders but it does not change when the class changes. const Circle = ({ filled, onClick }) => { const className = filled ? 'fas fa-circle' : 'far fa-circle'; return ( <div onClick={onClick} > <i className={className} /> <p>(class is {className})</p> </div> ); }; class App extends React.Component { state = { filled: false }; handleClick = () => { this.setState({ filled: !this.state.filled }); }; render() { return <Circle filled={this.state.filled} onClick={this.handleClick} />; } } ReactDOM.render(<App />, document.getElementById("root")); <script src

I have en issue with angular and font awesome. On first generation of list of icons suddenly all css class based icons are translated to svg. It affects only solid icons. for example : <i class="fas fa-2x fa-minus-square"></i> is translated somehow to <svg _ngcontent-c16="" class="svg-inline--fa fa-minus-square fa-w-14 fa-2x" ng-reflect-ng-class="fas fa-2x fa-minus-square" aria-hidden="true" data-prefix="fas" data-icon="minus-square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""> <path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5