Support » Theme: Period » Custom Icon Configuration

  • Resolved epicjono

    (@epicjono)


    Hello! I added a custom “link” icon next to the social media icons, because I want to link to some other sites.

    I’d like to make the icon function the same way as the social media icons and the search icon. That is, I’d like it to change to white on hover, but stay purple (#D7AFFF) at all other times, including active and focus.

    I’m unsure how to even go about that, because I just found that icon online and made it transparent. Is there a better icon out there that will come with the option to change colors? Is there a link icon built into the theme already that I haven’t found? Or would I need to somehow create a separate white link icon and configure that icon to show up on hover?

    And one more thing – Google PageSpeed Insights was telling me that it wants a width and height specified in the code for the custom icon. When I added this icon via the WordPress Customizer, I believe it only specifies width, as shown in the second-to-last line of the code below (found by “Right Click -> Inspect” on the icon):

    <img class="icon lazyloaded" src="https://cdn.shortpixel.ai/client/to_avif,q_lossless,ret_img/https://thoughtversation.com/wp-content/uploads/2021/05/Transparent-Link.png" data-src="https://cdn.shortpixel.ai/client/to_avif,q_lossless,ret_img/https://thoughtversation.com/wp-content/uploads/2021/05/Transparent-Link.png" style="width: 24px; max-width: 100%;" data-opt-lazy-loaded="false">

    So in summary,
    1. I’d like to have a custom link icon that can change to white on hover just like the rest of the icons.
    2. I’d like the icon to specify both width and height of 24px.

    Please let me know if this is possible, thanks!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Ben Sibley

    (@bensibley)

    I’m afraid this is a limitation with the custom icons. Since it needs to use an image rather than an icon font, there isn’t a way to modify the icon with :hover.

    Are you using ShortPixel’s adaptive images? If so, the missing height attribute shouldn’t be an issue: https://help.shortpixel.com/article/245-i-receive-the-following-image-s-are-missing-width-and-or-height-attributes-when-testing-with-gtmetrix-why

    Thread Starter epicjono

    (@epicjono)

    Understood, makes sense. Are there resources to help me learn how to create an icon font with the same functionality as the Facebook and Instagram fonts in your theme, or are those fonts created by the services themselves?

    And I’m using Optimole – I’m not sure why the source is from ShortPixel. I know I had used Shortpixel at one point, but I’ve removed it and cleared the cache already.

    • This reply was modified 2 months, 1 week ago by epicjono.
    Theme Author Ben Sibley

    (@bensibley)

    Period uses FontAwesome and there is a link icon available, but it’s not added as one of the normal social media icons. The custom icons are basically a fallback for when a social platform doesn’t have an icon supported by Font Awesome yet.

    Since you’ve already got a child theme installed, you could copy the ct_period_social_icons_output() function and manually add the link icon right before the closing </ul>. It’s a bit hacky but would work fine.

    Thread Starter epicjono

    (@epicjono)

    Thank you for that, I was trying it out and decided to add a “link” option to the ct_period_social_array() and ct_period_social_icons_output() functions, all in my child theme of course. This worked!

    'google-wallet' => 'period_google_wallet_profile',
    			'hacker-news'   => 'period_hacker-news_profile',
    			'imdb'   		=> 'period_imdb_profile',
    			'link'          => 'period_link_profile',
    			'mastodon'      => 'period_mastodon_profile',
    			'medium'        => 'period_medium_profile',
    			'meetup'        => 'period_meetup_profile',
    } elseif ( $name == 'pocket' ) {
    					$class = 'fab fa-get-pocket';
    				} elseif ( $name == 'phone' ) {
    					$class = 'fas fa-phone';
    				} elseif ( $name == 'link' ) {
    					$class = 'fas fa-link';
    				} else {
    					$class = 'fab fa-' . $name;
    				}
    Theme Author Ben Sibley

    (@bensibley)

    Well done! That should work just fine.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.