New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Custom icon fonts #4913
Comments
@Jahnp this would be a cool demo if possible |
Not knowing how to integrate Font Awesome (or some other icon fonts) with Fabric React is the only thing stopping me and others from using this library. A demo/ integration guide would make Fabric React much more approachable. |
This is definitely doable. All controls that render icons, such as Add font awesome's CSS to the <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> Then in your CommandBar, simply pass a font awesome element to ...
// Define items for Fabric CommandBar
const items = [
{
key: 'newItem',
name: 'New',
split: true,
onClick: () => console.log('click'),
cacheKey: 'myCacheKey',
onRenderIcon: () => { // Provide custom font awesome element
return <i className="fas fa-plus"></i>
},
ariaLabel: 'New. Use left and right arrow keys to navigate',
['data-automation-id']: 'newItemMenu'
},
... The result will look something like this: Note that I added a little extra CSS to color the icons blue. Hope this helps. I'll leave this open for now, since it would be useful to add this to the Icons wiki. |
Thank you so much for the demo, that was incredibly helpful! |
I also wanted to provide another way to do this using the default FontAwesome requires you use their initialization system to register the icons you want ( import { registerIcons } from '@uifabric/styling';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
registerIcons({
icons: {
'check-square': <FontAwesomeIcon icon='check-square' />,
...etc
}
}); This would allow you to use the registered icon names where you render icons. For example: import { Button } from 'office-ui-fabric-react/lib/Button';
const Test = () => <Button iconProps={{ iconName: 'check-square' }} /> |
We are also tracking this in our internal backlog to improve documentation. Will close this one since the question has been answered. |
Describe the issue:
I am creating a web app which is not related to any Microsoft products, so as I understand, I cannot use the Office UI Fabric icon fonts (https://developer.microsoft.com/en-us/fabric#/styles/icons). I think its awesome that you've made Selawik available as an easy replacement for Segoe UI, and I am wondering if there is also an easy way to replace the icon fonts with something like Font Awesome?
The text was updated successfully, but these errors were encountered: