Insert Buttons with Stylish Icons
This article introduces how to implement buttons styled with Font Awesome icons for Kintone Apps.
Font Awesome is a font and icon toolkit. It offers over 1,600 free icons that can be customized with CSS.
Prepare the App
Create the form
Create an App with any field settings. The customization introduced in this article will not be affected by any fields. Activate the App and navigate to any view. Check the location of the Filter and Create Graph icon. The customization will insert a Font Awsome icon in the same row as these icons.
Set the Libraries
Set the CSS file
Test the Code
After saving the settings and clicking on Update App, navigate to any view inside the Kintone App. A clickable icon with an airplane icon should be displayed next to the Create Graph icon.
How to specify icons
A variety of vector icons can be used by inserting an
<i> tag in the location to display the icon. Specify an icon by adding the class name
fa fa-[icon name]. The sample code in this article uses an airplane icon named “fa-plane”.