Archie Makuwa

Category: Joomla!

How to integrate FontAwesome with Nuxt.js using Yarn

I recently started working with Vue.js and I fell in love with the Nuxt.js framework. Coming from a Php and Bootstrap, the closest and most popular free icons framework happened to be FontAwesome – which I believe is the very same reason you ended up on this page.

Definitions

  • Bootstrap –  is a free front-end framework for faster and easier web development. Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
  • FontAwesome – is a font and icon toolkit based on CSS and LESS. It was made by Dave Gandy for use with Twitter Bootstrap and later was incorporated into the BootstrapCDN.
  • Vue.js – is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.
  • Nuxt.js – is a higher-level framework that builds on top of Vue. It simplifies the development of universal or single page Vue apps. Nuxt.js abstracts away the details of server and client code distribution so you can focus on application development.

Getting Started: 

I am assuming you already have your Nuxt.js set up, running and you are simply looking to integrate the FontAwesome library.

I am also assuming that your Nuxt project uses Yarn. Here is Nuxt boilerplate based on Yarn: https://github.com/nuxt/nuxt.js/

In this example, I am making of the Vue FontAwesome library which can be downloaded here: https://github.com/FortAwesome/vue-fontawesome

Step 01: Install the fon

Step 02: Inside your Nuxt.js project add a plugins/fontawesome.js file.

Step 03: Modify nuxt.config.js adding to the css and plugins sections.

Step 04: Usage / Example

You are not sorted. To use the Font Icons (including the brands, e.g. Instagram, Twitter, etc), simply refer to the emails below (brand and general usage):

 

FontAwesome icon reference: 

https://fontawesome.com/icons

Codelobster IDE Php Version Review

Let’s face it, there are thousands of premium IDE’s out there; some with good reviews and some with bad reviews. Some pricey and some not so pricey. I am always the boring and cautious time when it comes to splashing money on the latest piece of software. I prefer to research, properly test the software and thereafter spend a few rands (South African currency – ZAR) on something I would have tested.

 

I came across the Codelobster Php version of on the internet a few months ago. The brilliant IDE is currently available for free on the Codelobster (it works, but it obviously come with a few features stripped – some of which you can live without). Truth be told, there’s nothing like a powerful editor to simplify the process of creating powerful websites and application and Codelobster is one of them.

 

The free version allows you to edit PHP/HTML/CSS and JavaScript. It even comes with a free debugger, which can be a bit of pain to setup (the installation instructions are available on the Codelobster). My personal review, research, user experience and rating (based on the free version) is at a whooping 6.5/10. I will be investing in the professional version in the next few weeks and I am hoping not to be swept off my feet.

 

For a complete comparison between the free version and the premium version, you may navigate to http://www.codelobster.com/order.html to read more and decide on your preferred version.

How to insert a Favicon

Firstly before I proceed and dig in deep – well, this is fairly easy. But before I proceed, let me start by explaining what a favicon is to those who may be new to the web development field.

 

What is a favicon?

(Favicons) ‘Favourites icons’ are tiny logos that appear at the far left of a browser’s address bar. They can be static or animated, depending on your browser, and give websites that use them a little extra personality.  A favicon is square and usually measures 16 x 16 or in other cases 32 x 32.

 

How to I create a Favicon?

Most graphic editing application software have the functionality to create favicons. A favicon extension is (.ico). Alternatively you can make use of third party tools or even the following online Favicon generating website:

Inserting a favicon?

First, make sure your favicon has a correct extension (.ico) and that the name is:  ”favicon.ico” (obviously without the quotes). Insert the following HTML tag inside the <head>… </head> section of your web page:

 

If you have downloaded an animated favicon, insert this:

 

Note: GIFs are used for animated Favicons. And lately many websites are intended as web-apps these days, it’s commonplace to design app icons (known as touch icons) even for websites, and because device resolution varies from device to device, those icons should come in a variety of sizes. If this is the case on your project, you can use the following snippet:

 

If you have downloaded an animated favicon, insert this:

That’s it!

Copyright © 2019 Archie Makuwa

Theme by Anders NorenUp ↑