Make an icon into a link

Support
#1

Hi.
Is there any way to make link an icon? on this page: http://samverkanmotbrott.se/home-new-2-2/ I would like to also have the icons in the top made into a link.

Tomas

#2

Hi Tomas!

Cornerstone Icon element does not have a link option.

instead, you can replace the Icon element with a Raw element, and add this to it:

<a href="http://samverkanmotbrott.se/detta-ar-grannsamverkan/" style="color:black">[x_icon type="child"]</a>

You can search for icon names here: http://demo.theme.co/integrity-1/shortcodes/icons/, or here for more detailed list: http://fontawesome.io/icons/. (For Example Child icon is supported, but not on the X available icons list. Just remove the “fa-” part from the name).

My example has inline style for easy use, but it would be better if you add a class to your icons, and style them with CSS.

Hope this helps. :slight_smile:

2 Likes
#3

Hi Tomas!

@Misho solution should work perfectly, if you have any issues or questions, let us know and we’d be happy to help.

Thanks!

#4

How would you put a blue circle around the icon and upon hover, make the blue circle turn green and the icon turn white?

#5

I would say assign a class to the link then use this css:

.YOURCLASS{
border: 4px solid blue;
border-radius: 100%;
}

.YOURCLASS:hover{
border: 4px solid green;
}
1 Like
#6

Ok. Worked perfectly. But I would like to change the size of the icon as well, to like 80 px. Where in the code do I put that?

Tomas

#7

Hi there,

It looks like you might have figured it out already, but using font-size is the way to go when setting the size for font awesome icons.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.