Classic icon - make bigger and add anchor hyperlink

Support
#1

Good afternoon. I have a section of my webpage where I have added a classic icon. I want to make it bigger, and add an anchor to another section of the same page. I can find some vague instruction on this forum, but often, support doesn’t tell us (me) where to input said code. Can someone tell me how to do these two things, and do I enter the coding on CSS, or in the fields on the “Inspector” section of Cornerstone.

Here is the page, and I’m referencing the down down arrow under “Want to know even more?” dev.terislater.com/about

#2

Hello There,

Thanks for writing in! With classic icon, you can only display an icon and set how big is the icon and it’s color. You cannot link it a site url or a page. We are yet to release the v2 version of the icon element in our next releases. If you want to use the classic icon and have it link to a url you will be using it as a shortcode. Please insert a text element and insert this shortcode:

<a href="your-link-here">[x_icon type="thumbs-up" icon_color="#fff" icon_size="30px" bg_color="#000" bg_size="50px" bg_border_radius="50%"]</a>

To know more about the icon shortcode, you can check the demo here:
http://demo.theme.co/integrity-1/shortcodes/icons/

Hope this helps.

#3

For the hyperlink, I don’t want it to go to another page or external site. I was hoping to anchor it to a lower section of the same page meaning when you click the down arrow, it jumps to that section of the page. I thought I had seen instruction for that somewhere, but maybe not?

I found code to make it bigger in the style box, but there’s an extra ;"] showing up on the page now. What did I do wrong?
[x_icon type=“angle-double-down” style=“font-size:40px”]

#4

Hi there,

Ah, what you need is to change the link from URL to ID. Example, let’s say your lower section has and ID of lower-section, then your link should be href="#lower-section". Please check this https://www.w3.org/TR/html4/struct/links.html

And I don’t see ;"] from your page, how about providing the entire content/code that you added?

Thanks!

#5

On the icon, I put this in the “Style” box at the bottom: [x_icon type=“angle-double-down” style=“font-size:40px”]

Now my icon looks like this: (two down arrows) ;"] you can see it by looking at this page: dev.terislater.com/about (scroll down to the section in white that says Want to know even more?

I’m sorry - but I still don’t understand WHERE I am supposed to type the anchor href. I have the ID set on the lower section, but to link that double down arrow to that section…Where do I put the href="#more"? CSS isn’t working, and neither do any of the fields on the CS inspector. I am using a Classic Icon if that helps.

#6

Hi there,

You can remove the newly added codes and see where that :"]

Follow the example below with style attribute.
<a href="your-link-here">[x_icon style="font-size:40px;" type="angle-double-down" icon_color="#fff" icon_size="30px" bg_color="#000" bg_size="50px" bg_border_radius="50%"]</a>

Hope that helps.

#8

AHA! I finally got something to work!

Here is what I did.

  1. I deleted the Classic Icon element.
  2. I added a Classic Raw Content element.
  3. In the content box, I added the following code: < a href="#more">[x_icon style=“font-size:50px;” type=“angle-double-down” icon_color="#798086"]< /a>

The only edit I made here was to add in a space at < a href and < /a to make sure the code looks correct on this forum. In the actual code it is <a href with no space and in case anyone else finds this useful!

#9

Thanks for sharing your solution!

#10

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