In this post I’m going to explain how to use font awesome pro icons in a simple React.js or Next.js application.

I’ve spent a few hours browsing the web trying find how to get my pro icons to show but so far the documentation has been confusing or incomplete.

My aim with this post is to give a simple solution that works without all the effort I had to go through.

NPM Install / Yarn Install Libraries

Install the Font Awesome icon libraries via terminal or command line.

NPM

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/react-fontawesome

Yarn

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/react-fontawesome

Install Pro Icons Libraries

Important! Follow the pre-requisite configuration instruction at https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/using-package-managers#installing-pro. Note you’ll need to logged in to get your unique secret key.

Install the libraries you require from the list below via terminal or command line.

NPM

npm i --save @fortawesome/pro-solid-svg-icons
npm i --save @fortawesome/pro-regular-svg-icons
npm i --save @fortawesome/pro-light-svg-icons
npm i --save @fortawesome/pro-duotone-svg-icons

Yarn

yarn add @fortawesome/pro-solid-svg-icons
yarn add @fortawesome/pro-regular-svg-icons
yarn add @fortawesome/pro-light-svg-icons
yarn add @fortawesome/pro-duotone-svg-icons

Import the Libraries into your React.js or Next.js App

Import the libraries you wish to use.

I’m importing the pro regular font into my project. I’ve created a page called finance.js.

I want to show the regular fa-check-circle as shown below:

import { ReactElement } from 'react'
import { library } from '@fortawesome/fontawesome-svg-core'
import { far } from '@fortawesome/pro-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

library.add(far)

function page() {

    return (
        <div class="container">
            <FontAwesomeIcon icon={["far", "check-circle"]} />
        </div>
     )
}

I’ve found that the icon names are the same as the class name shown on the Font Awesome e.g. fa-check-circle, except you just need to remove the fa- part as we’re already specifying which library it’s coming from.

Now, you should now see your icon displayed on the page.

On 16th June 2016 I ran a workshop at Staffs Web Meetup. During the workshop I covered a handy little process which can be used to help with the planning of almost any project.

By the end of the evening, the process was named the “Allsopp Planning Process” (or something to that effect!). After my initial introduction, we split into small groups to put the process into practice. Projects included planning a dinner party, a hat festival (#hatFest), moving to America, planning a project management lightning talk and even the building of a house extension!

So what is this process? How can one process be used to plan such a wide range of projects? Let me introduce you to the “Allsopp Planning Process”. It’s a simple 4 (and a bit…) step process:

  1. Define the idea, topic or question we’re trying to plan/answer and who is the project targeted at?
  2. Mind map, throw all your ideas on the page, write down everything you can think of related to your project (preferably on individual post-it notes)
  3. Prioritise and organise (this is easier if you used post-it notes)
    1. Look back over your post-it’s, now try and group them together into logical groups to organise your thoughts
    2. Prioritise the post-it notes by putting either an E, D or N next to each post-it:
      1. E = Essential – this is something that you must have/do for your project to work
      2. D = Desirable – this is something that you would really like to have if you have the time and/or budget to allow for it
      3. N = Nice to have/Not required – this is something that wouldn’t make an impact on your project if you didn’t include it but can be added if time and/or budget permits
  4. Finally, decide whether there is a time and/or budget restriction to your project
    1. Starting with the essential items, apply your time/budget restriction
    2. If you still have time and/or budget left after working through the essential items, then do the same for the desirables followed by the nice to haves until your time/budget has ran out

And that’s it! Simple right? 😉  Why not try it on your next project and let me know in the comments how you found the process.

staffs-web-meetup-june-2016-7-of-11

I have used this process on a few projects, both at work and for personal projects – one of which was planning my honeymoon in Florida next year. I wanted a good old Blue Peter style ‘sticky back plastic and loo roll tube’ – “this is one I prepared earlier” example so started the plan purely as an example for the workshop. In doing this I’ve managed to work out exactly what Phil (my husband to be) and I want to do on our honeymoon, which is great!

I first learnt about this process during a training workshop I went on with my previous employer to help me improve my confidence when delivering presentations. I left the workshop thinking about how this process could be adapted to help plan loads of different types of projects and the above process is what I ended up with.

Finally, I’d like to thank everyone who came along to my workshop, it was such an enjoyable evening. So far the feedback from the evening has been positive and greatly appreciated.

In order to make a perfect meringue you need to follow the simple steps below. These meringues are simply the best meringues I have ever tried, they are crispy on the outside but soft, gooey and sticky on the inside just how it should be.

Please note that the mixing settings are for a KitchenAid mixer, please adjust according to your mixer.

Ingredients

3 egg whites

140g caster sugar

1/2 tsp vinegar

1 tbsp corn flour

Method

  1. Place the egg whites in a large mixing bowl and put mixer on speed 10 (high speed) until egg white turn white, fluffy and stiff.
  2. Continue mixing while adding the sugar gradually until the sugar has completely dissolved into the mixture.
  3. Add the corn flour and the vinegar to the mixture, continue mixing until all ingredients are combined.
  4. Pour the mixture out onto a greaseproof lined baking sheet leaving a well in the middle.
  5. Place in the oven for 1 hour at 150oC / gas mark 2.
  6. After the mixture has been in the oven for 1 hour, turn the oven off and leave in the oven for about 30 minutes.
  7. Take the mixture out of the oven and leave to cool fully before decorating with cream and fruit.

Its nearly time to run 6 miles for Sport Relief. I will be running/jogging/walking yeah probably more walking the 6 miles sport relief challenge this Sunday 21st March 2010.

Getting a bit nervous now, specially as my work colleges are now going to watch out for me on TV. I’ll make sure I keep away from any cameras 😀

If you want to sponsor me there is still time just go to: http://www.mysportrelief.com/personalPage.aspx?SID=93319 and pledge as much as you possibly can. 🙂

The team is currently at £176, would be nice to get to a round £200.

Happy pledging and thank you to those that have already made their generous pledges, we wouldn’t be doing it if it wasn’t for you.

Bye for now, hopefully I wont die this weekend and will be able to announce our success with a couple of photos.

Visit my previous Sport Relief post.

Please sponsor me today

I’m rising to the challenge to raise money for Sport Relief 2010. I will be running/jogging/walking 6 miles (just under 10K) in London on the 21st March 2010 at 11:45am. I will start at London Victoria and will finish at London Embankment so look out for me on TV!
I’m getting involved because Sport Relief brings the entire nation together to get active, raise cash and change lives. All the money raised is spent helping poor and disadvantaged people turn their lives around – in the UK as well as the world’s poorest countries.

I’d really appreciate your support by sponsoring me to take part. To make a secure online donation, visit http://www.mysportrelief.com/NatashaAllsopp?SID=93319

To find out what a difference your sponsorship money can make, please visit http://www.sportrelief.com/about/how-your-money-helps

Thank you for your generous support!

Phil and Natasha in Plymouth for Sport Relief 2008

What is Sport Relief?

The whole of the UK will come together for Sport Relief to get active, raise cash and change lives.

It has a unique history of dedicated people doing extraordinary things to make a difference – from David Walliams’s swim across the English Channel, to Eddie Izzard’s amazing marathon a day around the UK.

And that’s not to mention the thousands of incredible people who rise to the challenge by doing the Sainsbury’s Sport Relief Mile. Or our amazing fundraisers who do something fun and active to raise cash and help make the world of difference.

All the money raised by the public is spent by Comic Relief
to help transform the lives of poor and vulnerable people,
both at home and across the world’s poorest countries.

Yay! I’m so glad I have had my results and I passed my second year of University.

The results below are out of 15.

GUI:Design and Implementation – 14

Professional and Enterprise Development – 12

Web Programming with Servlets and JSP – 12 (really happy about that grade)

Software Development for Mobile Computing Applications – 11

Concurrent Programming in C# – 9 (this could have been higher if it wasn’t for the tutor who marked it)

Database Systems – 8

Windows Game Programming – 4 (don’t do games programming in your second year, if you didn’t do it in the first year)

Further Object-Oriented Programming – 4 (really don’t know what happened with this one! Time management around Christmas I think)

I’m not so impressed with the last two grades but at least I passed them (4 is a pass, just!), but the rest of it I couldn’t have possibly done any better.

Now I can enjoy working for IBM for the year and think about my final year of University nearer the time.

I got a new phone last week, it’s the Blackberry Bold. I’m very impressed with the phone, it’s very responsive, easy to use and looks amazing.
I was unsure of whether to get the Blackberry Bold or the iPhone however, I’m glad I went with the Blackberry because it’s much easier to use a real keyboard as opposed to the soft keyboard. Also I have read that people thought the camera and the battery were poor on the phone; however I feel it is more than efficient for a smart phone which is always connected to the internet and prominently a business phone. I have to charge it every 2 days and that is with a lot of internet use throughout the day.

What made the phone even more appealing was the contract I managed to get from O2, the online contracts include a free handset on a £45 per month contract. I managed to get a free handset on £30 per month with unlimited Blackberry internet, 1200 minutes and 1000 texts per month.
I probably could have got more off the phone but i didn’t want to push my luck.

I went down to Eastleigh, Southampton last weekend to view a house for while I’m working at IBM.
Its a nice area and house, plus its about 10 min drive away from IBM and 30 min drive away from westquays shopping centre, southampton, which is perfect.

Really looking forward to moving in the house and starting work now. What makes it better is the guys I’m moving in with are really nice and I feel we will all get on well.

Find out more about IBM placement assessment centre.

Not got much to say about this subject, but will be posting again soon.

I completed the 6 miles for sport relief yesterday in London.

Spoke to the likes of Frank Skinner, and Dallas Campball and Liz Bonnin from Bang Goes the Theory on BBC 1.
I wouldn’t have been able to do this without my wonderful boyfriend, who did all 6 miles with me 🙂 Thank you darling!

Above are few photos from the day, sorry most of them are fuzzy, I was jogging after all!

I got a new car last week, it’s a Citroën Xsara Forte, hatchback, 1.4i, 5 doors.

It runs like a dream, and has all the added luxury extras such as; seat and steering wheel height adjusters, front and side airbags(safety first), power assisted steering, anti-lock brakes, lights that tell you off when you haven’t got your seat belt on or you open the door, amazing! I’ll stop going on now…

Also I managed to sell my old car for £200 today which I am very happy about. 🙂

Citroen Xsara

Citroen Xsara

Citroen Xsara