E-Mail and costum social icons

sophssketchpad · Member · February 16, 2021 at 12:34 pm
Copy link

Add topic to favorites
1) E-Mail Icon
I added my e-mail address via mailto: to the social icons but instead of an envelope it displays the Yahoo logo (it is a yahoo address for the moment). When I link to the contact form page it even just displays the general link icon. Is there a way to display an envelope instead for either ways?

2) Other social icons
I have a few links in the social menu to pages that do not have icons in the standard set included in this theme. Is there a way to include custom icons so visitors know what pages these are without hovering over it?

Thanks in advance!

The blog I need help with is: (visible only to logged in users)
sophssketchpad · Member · February 16, 2021 at 1:06 pm
Copy link
3. Menu on mobile phone
Also, it seems that the social menu is blocking the “Soph’s” in “Soph’s Sketchpad” in the mobile version with my menu configuration. Is it possible to have the magnifier icon for the search bar on the second line next to the RSS icon so the Title is fully visible.

See here: null
alinclamba · Staff · February 16, 2021 at 3:56 pm
Copy link
Hey!

I confess that I’ve just spent some time on your site, enjoying the comics you posted. Great job! 👏

Thanks for taking the time and describing so nicely the issues you’re facing. I appreciate that. Now it’s my turn, so let me take care of the issues one by one.

#1. Email Icon

There seems to be a minor glitch, indeed. When using Yahoo mail, instead of the envelope icons, there’s the Y letter. We’ll fix that, but until then, you can apply the CSS below:
```
/* Fix the Social Icon for Mail when using Yahoo */
.nav--toolbar a[href*="mailto:"]:before, .nav--toolbar a[href*="mail"]:before {
    content: "\f0e0" !important;
}
```
#2. Other social icons

As you might know, for icons in our theme, we use FontAwesome, and if you try to use icons, that are not supported, they won’t be displayed. Check out the complete list of icons supported: https://fontawesome.com/icons?d=gallery.

#3. Site menu on mobile

I see that. It’s because of the Social Menu length. To fix it, just use the CSS:
```
/* Display the full Logo Text on mobile */
@media screen and (max-width: 800px) {
  .site-title {
     padding-top: 50px;
  }
}
```
See more about adding custom CSS here.

Let me know if I managed to answer your questions. 👀

Alin
sophssketchpad · Member · February 16, 2021 at 7:48 pm
Copy link
Thank you so much! I am glad you like my art. :)

Also thank you for helping me with these things. The problems have been solved now. I appreciate you swift help!
alinclamba · Staff · February 16, 2021 at 9:22 pm
Copy link
I am happy to help. 🤗

If there’s anything else, just let me know without thinking twice.

Stay safe! 💪

Alin
Pixelgrade
sophssketchpad · Member · February 17, 2021 at 9:39 am
Copy link
Thank you! Stay safe as well!

Sophie

No items found.