Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • August 23, 2018 at 6:23 pm #1000873
    tma8

    Hi there,

    I followed your instructions for adding a custom font (Goodreads icon) to my Social Profiles area and finally got things working. Now the only issue is that on mobile browsers (iOS and Android), the custom icon is not displaying correctly. More specifically, the inner G is not showing (I only see a circle with background color). If viewed from a desktop browser – including responsive views in design mode – the icon looks as it should.

    Any ideas on why this is happening?

    Thank you

    • This topic was modified 6 years, 3 months ago by tma8.
    August 24, 2018 at 9:05 am #1001070
    Rikard

    Hey tma8,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 479px) {
#footer .social_bookmarks a::before {
  font-size:26px;
}
}

    Best regards,
    Rikard

    August 24, 2018 at 3:15 pm #1001269
    tma8

    Thanks for that Rikard. Unfortunately, that doesn’t work. The custom font gets bigger, but the inner G fill still doesn’t show up on mobile.

    August 24, 2018 at 7:41 pm #1001367
    Basilis

    Hi,

    Please add code of Richard and leave it there so we can be able to work and see what is happening

    Best regards,
    Basilis

    August 24, 2018 at 8:03 pm #1001381
    tma8

    Done! Left code in so you can take a look. Thanks

    • This reply was modified 6 years, 3 months ago by tma8.
    August 25, 2018 at 8:05 am #1001513
    Rikard

    Hi,

    I think this a case where mobile browser are unable to render exactly what a desktop browser is able to do. I’ve seen many cases where for instance some colours are not rendered the same, or not at all, on mobile as they are on desktop. Maybe you could try changing the background colour instead?

    Best regards,
    Rikard

    August 25, 2018 at 1:19 pm #1001631
    tma8

    Thanks Rikard. I tried changing the color and background color, but that didn’t help.

    August 27, 2018 at 2:39 am #1002088
    Ismael

    Hi,

    Thanks for the update.

    We need access to the WP dashboard as well. Please add the details in the private field.

    Best regards,
    Ismael

    August 27, 2018 at 5:30 am #1002129
    tma8

    Here’s my wp login

    Thanks

    August 27, 2018 at 12:46 pm #1002246
    Ismael

    Hi,

    Thanks for the update. The icon is not displaying even on Chrome desktop. Where did you get the icon? I search for it on fontello.com but the icon is not available.

    Best regards,
    Ismael

    August 28, 2018 at 8:33 pm #1002818
    tma8

    Hi Ismael,

    I checked FF, chrome and safari on Mac and it’s showing the icon for me (see link below). As for the icon, I grabbed it from iconfinder and uploaded it to Fontello as a custom svg.

    Thank you

    August 29, 2018 at 7:04 am #1003009
    Ismael

    Hi,

    Thanks for the update.

    Can I have access to the svg file? I would like to test it on my installation.

    Best regards,
    Ismael

    August 29, 2018 at 4:39 pm #1003216
    tma8

    Here’s the link to custom svg file (which fontello generated as a zip). This was the file that I uploaded via the Enfold import area

    https://www.dropbox.com/s/c4bh1n9nbubozmz/fontello-a1176af1.zip?dl=0

    Thanks!

    August 30, 2018 at 8:54 am #1003440
    Ismael

    Hi,

    I meant the actual goodreads svg file. I would like to generate a font file from it. Is it colored?

    Best regards,
    Ismael

    August 31, 2018 at 10:55 pm #1004237
    tma8

    Here’s the goodreads svg file. Thanks!

    https://www.dropbox.com/s/8pm9q14c80shb4y/if_goodreads_social_media_logo_1407939.svg?dl=0

    September 3, 2018 at 6:06 am #1004774
    Ismael

    Hi,

    Thanks for the update.

    We uploaded a working version of the svg file. The icon displays properly now.

    Best regards,
    Ismael

    September 3, 2018 at 10:13 pm #1005205
    tma8

    Hi Ismael,

    Thanks very much for that! I see the icon showing up properly now on mobile. May I ask what it was that you did? (in case for future cases like this). Did you do something to the svg file i sent over or did you grab another goodreads icon from the web?

    Regards,

    Louis

    September 4, 2018 at 11:11 am #1005419
    Ismael

    Hi,

    The previous svg file was not valid because the vector paths are not compounded. You have to edit it first in a vector editor like Illustrator to compound the path.

    Best regards,
    Ismael

    September 4, 2018 at 11:38 am #1005453
    Guenni007

    i would not do it this way. – just for one or two social buttons. Big advantage – you can have here colored icons.
    take one part of the code you posted above – but the second code should embed the colored png f.e.
    everything was good described here:
    see here: https://kriesi.at/support/topic/adding-custom-social-icons-3/#post-934964
    The documentation has this too : Using images or non-Fontello icons
    only the image has gone : so for exsample take this here:

    or for smaller icons it is better to have something like this:

    you can see the example here ( top left) : https://webers-testseite.de/

    September 4, 2018 at 1:15 pm #1005539
    Ismael

    Hi,

    Thanks @Guenni007! :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • You must be logged in to reply to this topic.