069 Font Awesome and ColdFusion (never build icons again) with Nolan Erck
Nolan Erck talks about “Font Awesome and ColdFusion (never build icons again)” in this episode of the CF Alive Podcast, with host Michaela Light.
https://teratech.com/podcast/font-awesome-coldfusion-never-build-icons-again-with-nolan-erck/
Tired of having to make “delete”, “edit”, “new”, “save”, “confirm”, and “purchase” icons for your clients? In 3 different sizes (desktop, tablet, mobile)? And new versions for each color scheme you use? Enter Font Awesome! Font Awesome gives you scalable vector icons, that are totally customizable, all by just including a CSS file in your project. It’s free, compatible with current devices and browsers, easy to use and customize to your liking. Font Awesome is compatible with Bootstrap, various other frameworks, screen readers, retina displays and cuts down the time you spend doing “boilerplate” work in PhotoShop for every project!
Target Audience: Designers and CF developers that are tired of having to rebuild the same icons for every project. Attendees should know some basic HTML and CSS, no further programming or PhotoShop skills are required.
Show notes
What is Font Awesome
A vector based CSS font that you can use in CF apps that displays icons without graphic files
Why should CF developers care?
Auto sizing for desktop, tablet and mobile
Easy to change the look and feel in code – no need to go back to a graphic designer.
Display or change icons in code (JavaScript)
Faster page loading.
100s of commonly used icons included
Vector based graphics – no pixelation on zooming
Pricing
Free open source version
900+ icons
Automated Accessibility
Paid version with themes $60/year
500+ more icons
Font CDN
Subset only the icons you need into a custom font
Version 5
Demo
The i tag “icon” – overrides the old meaning of italic
Treating icons like fonts – changing sizes and colors, applying styles
Bordered, spinning and rotated icons
Stacked icons
Divs
Float
Rotating icons
Installing Font Awesome
Add one line of javascript to your header code.
CSS Lint
Documentation
Online docs
Blog
Support (paid version)
How does it work with Bootstrap?
No problem
Pros and cons of Font Awesome
Pros
Saves grunt work
Better UX
No pixelation
Responsive ready
Faster site
Cons
30 Mb download to install on website (vs CDN)
A 700k file overhead on Free version
Paid Subscription (on Pro version)
Why are you proud to use CF?
WWIT for you to make CF more alive this year?
What are you looking forward to at Into The Box?
Mentioned in this episode
Font Awesome
MuraCMS (ColdFusion Content Management System) used Font Awesome in the admin screen
Into The Box conference
MuraCon – dev and marketing (digital experience) tracks
ColdFusion conferences roundup
Demo code
CSS Lint tools
Link 1
Link 2
Preso and demo
Jazz conference
a 3-day event, March 21-23, 2018, on Web & JavaScript Development! All tickets include workshop day, and there will be 4 concurrent tracks. Workshops and sessions include:
Angular,
React,
Vue,
JavaScript,
JS Frameworks,
HTML5,
CSS3,
tools, techniques.
This is not a mega-conf – rather it is an intimate event with less than 250 attendees
Ray Camden
Simon McDonald
Jessica Kennedy