[Kim gParticipant]

Hi there,

Just downloaded the theme – so far, I’m very impressed!

I’m working on my homepage – which you can see here: leadaslove.com

I am using the Renew 10 template. My question is for the row of 6 images that roll in after the “Our Goal” band on the page. I would love to be able to create similar type images on the demo page and use them. (you can see that demo page here: http://theme.co/x/demo/renew/10/) I’m a bit confused about the “icons” – I inserted one (the wrench) and you can see it has a strange rectangular on the bottom of it.

So basically – what I’m asking is how I use this area of the page. If I want to pump up these icon images in photoshop (adding circles, color and/or shadows), is that possible? And how do I go about inserting them then?

Sorry if I’m being a tad unclear — but thanks in advance for the help!

[ChristianModerator]

Hey Kim,

Thanks for writing in and your kind words.

The rectangle border in your icon shows because your wrapped the icon shortcode in code element. Please remove it from the code element or you can disable the border of the code element by using CSS. In the Customizer > Custom > CSS, please add the code below.

code { border: 1px solid #e5e5e5; }

If you want to use image icons, you can simply use the Image shortcode inside the column. For more information about the elements, please go through our Knowledge Base.

Hope that helps. 🙂

[Kim gParticipant]

Thanks for the response!

So – yes, I think what I want is what you’re referring to as “Image Icons” — I know I asked previously, but is there a way to upload these icon images you provide into photoshop to be able to add color and such?

I did go through the Knowledge Base – but I didn’t find this answer – if I’m missing it, please just let me know.

Thanks again.

[ChristianModerator]

X icons uses Font Awesome so you couldn’t use them in Photoshop. But, you can change the color of the icons by using CSS.

Let us know if you need further assistance.

Thanks.

[Kim gParticipant]

Ok still confused. So i want to add [icon type=”wrench” style=”font-size:100px;”] to a column. First of all do I put it in a certain element? Say text element?

Also I am unfamiliar with font awesome…is there a way to access this?

It looks like ICON used to be it’s own element but now the only option is icon-list. Just feel like I’m missing some key pieces to understanding how to properly use your icons.

Thanks again,
Kim

[Rayna CParticipant]

Hey Kim g (and anyone else interested),

I wanted to do the exact same thing as you – I wanted to be able to use the icons in Illustrator and Photoshop to incorporate into designs for my sites. After much frustrating searching online, I’ve found the solution!

1.) Go here and download the FontAwesome font for free:
http://fortawesome.github.io/Font-Awesome/

2.) Install the .otf font on your computer, then open your design program of choice.

3.) Then, go to this webpage and save the page as a PDF file:
http://fortawesome.github.io/Font-Awesome/cheatsheet/

4.) Open the PDF file, find the icon you want to use in your design program, select it and copy it.

5.) Head over to your design program, and in your design file, make sure you’ve selected the Text tool, and the FontAwesome font from your list of fonts.

6.) Then paste the copied icon from step 4 above. There you go! Now you can change it’s size, color, etc.

Happy designing!
~Rayna

[ChristianModerator]

Thanks for sharing Rayna.

[Author]

Posts