Insert Buttons with Stylish Icons
Overview
This article introduces how to implement buttons styled with Font Awesome icons for Kintone Apps.
Font Awesome
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
JavaScript
Set the following URL into the App's JavaScript and CSS Customization settings , under the Upload JavaScript for PC option.
- https://js.kintone.com/jquery/3.6.0/jquery.min.js
CSS
Set the following URL into the App's JavaScript and CSS Customization settings , under the Upload CSS File for PC option.
- https://js.kintone.com/font-awesome/v4.7.0/css/font-awesome.min.css
Sample Code
Set the JavaScript file
Prepare the following JavaScript code in a text editor and navigate to the Kintone App's settings. Upload the file into the Upload JavaScript for PC option of the JavaScript and CSS Customization settings .
|
|
Set the CSS file
Prepare the following CSS in a text editor and navigate to the Kintone App's settings. Upload the file into the Upload CSS for PC option of the JavaScript and CSS Customization settings .
|
|
Attention
Caution: The order in which JavaScript and CSS are uploaded to an app matters. In this example, ensure that the jQuery CDN is uploaded before the JavaScript file. You can change the order of uploads by clicking and dragging on the arrows for each item on the Upload JavaScript / CSS page.
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".