Saturday, November 17, 2018

Using Google Fonts And Font Awesome In Photoshop

With a recent project I needed to design a mock-up for the customer in Photoshop. I was planning on using Font Awesome and Google Font Orbitron. I used this tutorial to show me how to download and install a Google Font on my machine so I can use it in Photoshop.

https://www.google.com/search?q=use+google+fonts+in+photoshop&ie=utf-8&oe=utf-8&client=firefox-b-1#kpvalbx=1

For adding Font Awesome I followed the instructions presented by OSTraining

https://www.ostraining.com/blog/webdesign/fontawesome-psd/

I hope this helps someone else out there…

 

Using Built-in Font Awesome Fonts In DIVI

Divi theme has some built in icons that you can call in a style sheet such as the following:

.someclass:before {
font-family: “ETmodules”;
content: “\6c”;
}

This will give me the icon of a pad and pencil.

I originally got this tip from Josh Hall on YouTube. Thanks for sharing Josh!

This issue I had was being able to figure out the code number for which Icon. The code numbers do not match Font Awesome font codes.

I finally found Elegant Themes cheat sheet for these icons.

The Elegant Icon Font – 360 Of The Best Free Icons For The Modern Web

I hope this helps someone else out there…