Mon May 07, 2018 1:11 PM

Investigated why font awesome icons are not displaying

Domain:

Debugging

Description:

a refresh is required to make icons display

Notes:

New Font Awesome SVG uses js to load fonts but turbolinks doesn't load them. Custom js and css was required to fix the problem

View All Logs
Mon May 07, 2018 1:18 PM
guide
Font Awesome 5 SVG icons use javascript to find <i> tags with an icon class and replaces them with an <svg> tag. Turbolinks online displays these icons on initial page load and/or refresh, however when following a link, Turbolinks reloads the page and not the icons. This guide assumes that you have already loaded font awesome into your project using your preferred method. For what its worth, this guide uses the font awesome CDN more
Tue Dec 12, 2017 5:00 PM
guide
When your content doesn't fill the page, the footer won't stay at the bottom of the page by default.  There are a lot of solutions available to solve this with javascript, CSS tables, and using .fixed.  I don't like these hacky solutions that provide inconsistent results.  Using CSS flex, you can achieve the desired results consistently using only CSS. First, add a class to your body. I prefer to use the site name for easier file searching. In this case, let's name it sample. <body class="sample-body"> ... </div> Next, wrap your content like so: <body class="sample-body"> <div class="sample-content"> ... </div>  ...more
Thu Apr 26, 2018 2:00 PM
guide
Add style options when initializing the Stripe Element object, like so: var style = { base: { // Add your base input styles here. For example: fontSize: '16px', lineHeight: '24px', iconColor: '#c4f0ff', color: '#fff', fontSmoothing: 'antialiased', fontWeight: 500, '::placeholder': { color: '#ffffff', }, ':-webkit-autofill': { color: '#ffffff', } }, invalid: { iconColor: '#FFC7EE', color: '#FFC7EE', }, }; View all Element options more