I want to use the WP Icons. How can i increase the size?

Hi, I want to use the WP Dashboard icons within my site. Then use them as Anchor links to various locations on the page.
I found the icons here - https://developer.wordpress.org/resource/dashicons/#dashboard

However when i try embed them with the Upfront Code element and pasting for example this code

<span class="dashicons dashicons-dashboard"></span> the icon appears really really small in the upfront editor and dont appear at all on the live site? How can it be scaled up to the same size as the link above? e.g. 30px by 30px ?

After that how can i anchor each icon to the corresponding title area? as they are not images i cant use the embedded settings link. (had some trouble setting this up in the past. Could you walk me through the solution please?)

Domain page - http://tinyurl.com/pn2866b

Support access is ACTIVE until September 8, 2015 12:02 am

thanks

Tom

  • Tyler Postle
    • CGO

    Hey Tom,

    I changed the html you added there slightly so it links the dashicon - this the code now:

    <a href="http://www.placeholder.com/all-courses/#dashboard" ><div class="dashicons dashicons-dashboard custom-dashicon"></div></a>

    I also made the "Dashboard" title an anchor as you can see in my screenshot. You can do that for the rest of the headings :slight_smile:

    You may also notice that I added a new class "custom-dashicon", this is so we can change the size of the dashicons without changing the size of all the dashicons on your site. So make sure you add that class to the rest of the dashicons you add too. Then add this custom CSS:

    .dashicons.custom-dashicon {
        font-size: 50px;
    }

    Adjust the font-size as needed.

    It might be easiest if you just copy and paste the code above then change the "dashicons-dashboard" class to whichever new one you use and also change the #dashboard anchor on the link to the new ones you make. Make sure you replace the domain url with your actual one too, I just didn't want it linking to your site.

    Hope that helps!

    Cheers,
    Tyler

  • Tom
    • Code Wrangler

    Hi Tyler,

    Thanks very much that worked perfectly. Managed to do the others fairly easily after that.

    Would you mind removing the screenshots in the last two posts please?

    Also for some reason while editing in upfront i can see the icons fine. However when testing site in another browser i.e. not logged into site. the icons are not visible. Do you know why this is?
    Visible from upfront page - http://take.ms/wXZi1
    not visible as visitor - http://take.ms/7GqV5
    Domain page - http://tinyurl.com/pn2866b

    Support access is ACTIVE until September 15, 2015 1:21 am

    Thanks
    Tom

  • Tyler Postle
    • CGO

    Hey Tom,

    Very odd, I don't recall that happening last time I tested your site out? Have you done a full plugin conflict check? Make sure none of your plugins are conflicting here.

    If it's still happening then could you send in your FTP so we can have a closer look?

    You can send that privately through our contact form: https://premium.wpmudev.org/contact/

    Select "I have a different question" for your topic - this and the subject line ensure that it gets assigned to me :slight_smile:

    Send in:

    Subject: "Attn: Tyler Postle"
    -WordPress admin username
    -WordPress admin password
    -login url
    -FTP credentials (host/username/password)
    -link back to this thread for reference
    -any other relevant urls

    **If you keep support access active then no need to send in wp-admin

    Look forward to hearing back!

    All the best,
    Tyler

    PS. I removed those images from earlier as requested :slight_smile:

  • Tyler Postle
    • CGO

    Hey Tom,

    Thanks for sending that in. The issue here is that WordPress only loads the dashicon CSS for logged in users. That's why we could never see it logged out. I added the dashicon CSS to the Upfront custom CSS area so now it displays no matter what :slight_smile:

    Sorry about the wait on this one. Hope that helps! If you have any further issues with this just let me know.

    Cheers,
    Tyler

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.