Adding hyperlink to icon

[morgand377]

Hello,
I am looking to add an icon to my website and I want to make a hyperlink so that when you click on it, it scrolls to a section of the webpage.

I would preferably like to use the built in “icon” element in cornerstone and add in some css into the “style” field to make it a hyperlink.

If this is not possible I am okay with using a shortcode. I used:

<a href="#x-section-4">
[x_icon type="balance-scale"]
</a>

and this is working for me but I cant figure out how to add the hyperlink to the shortcode or where to add style customizations (color, size etc.) in the CSS.

In conclusion, is there a way to use the “icon” element and add a hyperlink to it? and if this is not possible how can I add a hyperlink and style customizations to my shortcode. Thanks so much. you guys are the best.

-Morgan

(I am also going to include my login credentials in a secure not incase anyone needs to look at my site.)

[morgand377]

I think i beat you guys to it haha.
i used in a classic text element:

<a href="#bottomlink">
[x_icon type="balance-scale"]
</a>

and then in my page CSS i put:

.x-icon-balance-scale
{text-align: center;  font-size: 40px;
color:#999999}

this seems to be working for me, but if you guys know of a better way to do this or if i’m doing something wrong let me know!

you guys are the best. take care
-Morgan

[jumar]

Hello @morgand377,

Thanks for writing in!

Yes, there is a way to use the icon but combined with the button element. Please see this shortcode:

[button class="my-btn-sec-4" type="transparent" shape="square" size="jumbo" href="#x-section-4" title="Taxes" icon_only="true"][x_icon class="my-icon-sec-4" type="balance-scale"][/button]

Then add this CSS in Appearance > Customize > Additional CSS:

.my-btn-sec-4 {
   border-color: transparent !important;
}

.my-icon-sec-4 {
   color: #999999;
}

Please take note that #999999 is the default color of the icon. You can change this by referring to this tool: Icon

[morgand377]

Thats great thanks! one last thing. as you can see in the example the “icon” element has no excess space on the top or bottom, but my shortcode option has lots of space. is there a way to get rid of this? thanks

[morgand377]

okay i think i figured out how to make remove the excessive margins and padding from the text box, but now there is this mysterious margin inbetween my icon and my text. it is only revealed when i inspect the element in chrome. any ideas on how to remove this and bring my icon closer to my text?

[mldarshana]

Hi There,

Try following our element spacing guide here (https://theme.co/apex/forum/t/customizations-element-spacing/211).

Basically you can use the classes mtn to remove top margins and the mbn to remove bottom margin spaces.

Thanks!