Docs

[goalsarecool]

on the second row of https://goalsarecool.com/ i have 3 icons. How do I make the icons link to another page?

[Christian]

Hey there,

You’ll need to use a Button element with these setting:

Type: Transparent
Shape: Pill
Enable Icon: On
Icon Placement: Icon Only

You then need to assign an ID or Class to your button and add this inline CSS.

#taxi {
    background: gold;
    color: black;
    border: 0;
    width: 60px;
    height: 60px;
    line-height: 2.35em
}
#taxi:hover {
    background: skyblue
}

Thanks.

[goalsarecool]

I used the following code and made the button size jumbo.

#pbg-circles{
    background: gold;
    color: black;
    border: 0;
    width: 200px;
    height: 200px;
    line-height: 5.5em
}

#pbg-circles:hover {
    background: skyblue
}

However, the icon in the middle of the circle is not big enough. How can I make the actual icon bigger (not the circle)?

Thanks!

[Nabeel A]

Hi again,

You can try adding the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.home #x-section-2 .x-icon:before {
    font-size: 82px;
}

Let us know how this goes!

[goalsarecool]

Did not work. http://goalsarecool.staging.wpengine.com/

[Paul R]

Hi,

You can try this code instead.

.home #pbg-circles .x-icon:before {
   font-size: 82px;
}

Hope that helps.

[Author]

Posts