Using Font Awesome icons

Introduction

This article introduces how to use Font Awesome icons, that can be used from the Font Awesome library in the kintone CDN. Font Awesome makes it easy to utilize stylish buttons for your kintone App.

Customize the menu

Menu elements

kintone allows users to customize the menu elements of the Record List page and the Record Details page with JavaScript. For example, the kintone.app.getHeaderMenuSpaceElement() method is used to obtain the empty space element of the header of the record list - this is the area next to the Filter and Graph icons, above the list of records. 

Customization details

In this article, we will pretend that we are creating a flight reservation customization, and that we need to place a flight ticket reservation button in the menu section of the App (this article however will not go into the details of how to implement a function to reserve flight tickets).

The image below shows the Event Calendar app added from the kintone Marketplace, where we will implement the customization.

US_01.png

 

JavaScript settings

Set the jQuery URL from the kintone CDN in the "Upload JavaScript for PC" section of the JavaScript and CSS customization settings.
Also proceed to create a new JavaScript file with the following code, and upload it to the App.

sample.js

US_02.png


Save your settings, and update your App.
Go back to your list view, to confirm that a button has been created in the menu section of the App.

 

US_03.png

 

The UI of the button though does not match its surroundings, and looks out of place. We will proceed to solve this with Font Awesome and some CSS.

CSS settings

Create a css file with the below code, and upload it to the "Upload CSS file for PC" section of the JavaScript and CSS customization settings.

sample.css

US_04.png



Save your settings, and update your App.
Go back to your list view to see the button with the updated style.

 

US_05.png


Now the button should blend in better with the surrounding design. The button still looks somewhat awkward though - this is because the button contains text, whereas the buttons next to it displays icons instead. This is where we can utilize Font Awesome.

Use the Font Awesome library

Add the Font Awesome library URL from the kintone CDN to the "Upload CSS file for PC" section of the JavaScript and CSS Customization settings.


US_06.png


Also edit the JavaScript file we first uploaded (sample.js) as follows, and re-upload it:

 

Save your settings, and update your App.
Go back to your list view to see the button with the updated style.

 

US_07.png

 

Now the button should have an airplane icon in it. The button looks more natural, and fits with its surroundings.

How to specify an icon

You can use a variety of vector icons by inserting an <i> tag in the place you wish 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". 

Refer to the Font Awesome website for icons and their names.

US_08.png

 

 

Was this article helpful?
0 out of 0 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!