I’m using the Froala WYSIWYG editor with React. How can I change the toolbar button icon? For example, I’d like to change the icon of the “bold” button to the Font Awesome 6 FaCss3Alt icon from react-icons. Below is my current configuration for the Froala editor:
const config = {
toolbarButtons: {
....
},
imageAllowedTypes: ["jpeg", "jpg", "png"],
height: "434",
width: "100%",
quickInsertEnabled: false,
videoInsertButtons: ["videoBack", "|", "videoByURL", "videoUpload"],
paragraphFormat: {
N: "Normal",
heading1: "Heading 1",
H2: "Heading 2",
},
};
How can I achieve this?
Try with this:
toolbarButtons: {
bold: {
icon: <FaCss3Alt />, // Use the FaCss3Alt icon
tooltipText: "Bold", // Optional tooltip text
},
},
With these changes, the “bold” button in your Froala WYSIWYG
editor toolbar should now display the Font Awesome 6 FaCss3Alt
icon.