If you’re using Font Awesome in your WordPress posts and pages you may have noticed that it stops working when you view the page in the small mobile theme (known as minileven) which comes with Jetpack. This is the theme that shows up when you view a site on most iPhones, for example, so that might be a problem.
There’s a reason it’s like that, of course, which is that downloading Font Awesome every time adds to bandwidth, and minileven is supposed to be very light. But hey, you want the site to work don’t you? Luckily it’s easy to fix.
One thing that will not work is trying to add anything into a child theme. Minileven does not really work like that, and if you edit the actual minileven theme itself, every time Jetpack is updated the edit will be deleted.
So the answer is to make persistent changes. Now the WordPress Customizer allows this very easily by editing CSS which applies to the whole theme, regardless of updates.
In the WordPress dashboard go to Appearance>Edit CSS (if you don’t have this option, you are not using Jetpack so this solution isn’t going to work for you).
This CSS editing box will allow you to edit theme CSS and keep it, and it will be applied to minileven as well as your non-mobile theme.
Add in to the box this line, right at the top:
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
Note: the link above might need to be updated if Font Awesome is updated, as it often is. Check here for the latest link.
This will import a copy of Font Awesome CSS into minileven. Font Awesome will now work on your theme, including mobile-friendly minileven pages and posts.
If you want to use this only on mobile (probably a good idea if on your regular theme you are already using Font Awesome, because you don’t want to import it twice) then you can include a media query in the CSS to only import when the screen is less than a certain width of your choice. Here is an example that ought to work for smartphones, iPhones, and portrait 480×320 phones or smaller:
@media (max-width:320px) {@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"; }
