An unofficial plugin that allows use of Font Awesome v5 free icons in DatoCMS.
After installing the plugin, you'll need to add a new JSON field type to a block or model, go to the presentation tab, and select "Font Awesome" for the Field editor.
The data structure will be a stringified JSON object with the following structure:
If using with React, you can pass the entire output object above as the icon
prop to the FontAwesomeIcon component. Assuming the output object above hasn't already been parsed and is stored in a variable called myIcon, you can use it like so:
<FontAwesomeIcon icon={JSON.parse(myIcon)} />
Check out the video tutorial for usage with React: <https://youtu.be/a526r4uo4aI>
If you want to use via class names, you can concatenate the prefix
and iconName
like so:
1const parsedIcon = JSON.parse(myIcon);2const className = `${parsedIcon.prefix} fa-${parsedIcon.iconName}`;3console.log(className); // outputs "fab fa-amazon"
Then follow this tutorial: <https://youtu.be/vE6lmhZUNrQ>