Knack Operations
  • TABLE OF CONTENTS
  • Knack Operations Read-Only
  • Knack
    • Platform Overview
    • Functionality Guide
    • Style Guide
    • Banner Logos
    • Rounding Knack Costs Correctly
    • URL Parameters to populate a form
    • Importing Records
    • Copy an Application
  • Knack Security
    • Single Sign On (SSO)
      • Configuring a new Knack App with certificates
      • Enabling SSO in Knack
      • Configuring new certificates for all Knack Apps - When certs expire!
        • SSL Certificate Creation
  • Knack Integrations
    • Open Data Portal - Socrata Integration
    • ArcGIS Online Integration
    • CSR configuration prep in Knack
      • Creating CSR Page components
  • Knack Code
    • Code Version Control
    • GitHub Code Workflow
    • CODE: Login Buttons/App Setup
    • App Specific Custom Code
      • CODE: Vision Zero in Action
    • CODE: Knack Functionality
      • Big Buttons
      • Save Knack Record ID
      • Redirect Blank Menu Pages
      • Disable Trigger Buttons
      • Disable Modal Background Click/Touch
      • Disable Breadcrumb Navigation Links
      • Remove Back Links
      • Back Link Buttons
      • Return to Previous Page Button
      • Auto Input Validation Form Fields
      • Conditionally Hide/Show Form Fields
      • Return to Top Button
      • Refresh View Button
      • Detect IE
      • Set Map iFrame Source URL
    • CODE: Knack Look & Feel
      • Multipage Step Indicator
      • Modal Close Styling
      • Relabel Attachment Links
      • Navigation Dropdown Menu Buttons
      • In-Form Dropdown Menu Buttons
      • Trigger Buttons
      • Hyperlink a Form Field Label
      • Remove Table Header
      • Modify Table Summary Rows
      • Convert Values to UPPERCASE (Option A)
      • Convert Values to UPPERCASE (Option B)
      • Highlight Details View Label Body & Table Value
      • Report Headers
      • Report Filters Container Size
      • Report Element Colors
      • HighCharts Report Styling
      • Font Awesome Icons
    • CODE: Mobile Optimization
      • Detail Labels
    • CODE: Retrieve builder URL of Email Rules
    • CODE: Knack Print Page
      • Print Header with Page Break/Number
      • Print without overlapping views
      • Print using Menu Button
      • Print using Trigger Button
      • Show Character Limit of Input
      • Add fixed Footer on Print
  • AMD | DATA TRACKER
    • AMD | Data Tracker
    • Asset Changes
    • CSR | Flex Note Archiving
    • Cameras
    • Fix Broken CCTV Device Status Page Links
    • Performance Measures
    • Builder Notes
      • Configure New AMD Asset in Data Tracker
      • Data Tracker | Annual Signal and PHB Request Ranking
      • Page Rules (TMC) CSR
      • NOTIFICATION | Construction Status Email
      • NOTIFICATION | One Day Signal Engineer Due Date
      • DETAILS | Preventative Maintenance (PM)
      • DETAILS | Signal Detectors Object Tables, Reports, misc..
      • DETAILS | Signals
      • Signals Work Order | EDIT FORMS
      • Signals Work Order | FORM LOCATIONS
      • Editing Signals Work Order | NEW FORMS
    • Warehouse Inventory - Updating Journal Vouchers (JV) information
    • Cancel Transactions & Replenishments
    • Adjustment Transaction, Unit Cost Adjustments & Re-Stock
    • DTS | Adminstrative Action
  • DTS | Data & Technology Services Portal
    • DTS | Data & Technology Services Portal
    • Dataset inventory
    • Application Inventory
  • Finance & Purchasing
    • Finance & Purchasing Portal
    • Finance & Purchasing
      • Training, Quiz, Account Access Process
      • Purchase Request Statuses
      • List of emails generated
      • Re/Un-assigning Approver of a PR
      • Change PR Statuses (backend)
      • Invoice: FAQs
    • Warehouse Inventory
      • Adding a new inventory item
  • HR | Human Resources
    • HR | Human Resources Portal
    • Integrations TPW HR Portal
      • Integration HR Portal -> TPW Hire?
    • How to add a new HR Form
  • TPW Hire
    • TPW HiRe | Hiring Resource
  • PEP | Parking Enterprise Portal
    • PEP | Parking Enterprise Portal
    • Dispatch Resource Tracking Log Archiving
    • Update Parking Citation Report by Fiscal Year (FY)
  • ROW | Right of Way Portal
    • ROW | Right of Way Portal
    • COS JV Update
  • RPP | Residential Parking Permit Portal
    • RPP | Residential Parking Permits
    • Residential Parking Permits
    • RPP Migration
  • SBO | Street & Bridge Operations
    • SBO | Street & Bridge Operations
  • SMD | Signs & Markings Operations
    • SMD | Signs & Markings Operations
    • Table of Contents
    • Workflow
    • Markings | Work Orders
      • Process & Module Functionality
    • Markings | Service Requests
      • Process & Module Functionality
    • Signs | Work Orders
      • Process & Module Functionality
    • Signs | Service Requests
      • Process & Functionality
    • Contractor | Work Orders
      • Process & Module Functionality
    • Sign Fabrication Work Orders
      • Process and Functionality
    • Special Functions/Codes
      • Work Order Attachments
  • SMO | Smart Mobility Operations
    • SMO | Smart Mobility Portal
  • SMS | Shared Mobility Services
    • SMS | Shared Mobility Portal
    • License & Permit Management
    • Sources for Monthly Trip Records
  • STREET BANNER PROGRAM
    • Street Banner Program
    • Street Banner Program
  • TDS | Transportation Development Services
    • TDS | Transportation Development Services Portal
    • Color Palette
    • Role Permissions Guide
    • App Logic
      • Calculating Date Values for Reporting
      • Incrementing Review Cycle Automatically
      • Calculating Review Time & On Time Percentage
      • Calculating Cycle Completion Percentage
      • Calculating an Expiration Date
      • Automatic Due Date with Manual Adjustment
      • Roll up Child Object Conditionals
      • Converting an Entered Percentage to a Percentage Value
      • Create a Connection Link Field to View a Searched Record
      • Extracting Location Coordinates to add a Map Marker Map
    • TDR | Development Reviews
    • TIA | Traffic Impact Analysis
    • TDA | Transportation Development Assessments
  • Traffic Register
    • Traffic Register
    • Table of Contents
    • Workflow
    • Modules
    • Special Functions/Code
    • Permissions
  • TPW Forms
    • TPW Forms
  • Urban Forestry
  • VZA | Vision Zero in Action
    • VZA | Vision Zero in Action
    • Batch Copy Process for VZA Assignments
    • Calculate School Closures
    • Login Process for Officers
    • Officer Records
    • Update reports in Power BI
    • Use Tasks for Creating Child Records
    • Use Tasks for Notifications
  • O365 Resources
    • Resources
Powered by GitBook
On this page
  • The JS
  • The CSS
  • The HTML
  • How to Implement
  • To Note

Was this helpful?

  1. Knack Code
  2. CODE: Knack Look & Feel

Font Awesome Icons

How to insert and adjust Font Awesome Icon positioning

PreviousHighCharts Report StylingNextCODE: Mobile Optimization

Last updated 1 year ago

Was this helpful?

The JS

None needed 😎

The CSS

These stylings allow us to adjust the position of icons as rendered. For the most part, we use baseline which centers the icon vertically on the block line as shown in the examples above.

/****************************************/
/************* Icon Effects *************/
/****************************************/
.fa { vertical-align: baseline; }

.fa-bot { vertical-align: text-bottom; }

.fa-top { vertical-align: text-top; }

The HTML

To incorporate icons into your text, trigger buttons, or custom buttons, you will need to add

<i class="fa fa-map-marker"></i>

fa is the CSS class being called above followed by the fa-icon-name

How to Implement

Simply select the icon you want with the icon selector for menus and parent pages

or place within your application next to text (or by themselves) in titles or buttons

To Note

  • The New Knack Builder no longer renders markup on the builder side so you will want to double check that your HTML code is working and your icon is rendering on the live view.

Knack provides the Font Awesome 4 library as a way to incorporate icons into applications and help reinforce language and look of application elements such as menus or titles shown above.

Knack provides only version 4.7 of the FA library currently. are available but not yet integrated with Knack.

Font Awesome 4.7 icons
Font Awesome Version 5 icons
Map Marker Icon being used with a section title
Home Icon being set with the icon selector for a Menu or Parent page
Plus Circle Icon being set with the icon selector for a Menu view (button)
Placing the HTML in the View Title