Upfront icon not working in mobile.

On this website, in mobile, the icons turn to numbers or letters:
http://****businessowners.com/++++++/

  • Predrag Dubajic

    Hi Adam,

    I had a look at your installation but I must say I'm a bit confused on how does your installation work.
    It looks like you did everything on parent theme but it doesn't show any theme actually as active on your site.

    Can you tell me if you created your site on parent theme or on child theme, and did you use Upfront Builder or Upfront Editor to do your changes?

    Upfront Parent theme shouldn't be used in any case, that's why we provide starter themes and also Upfront Builder that allows you to create your own child theme and start from scratch.

    I see in your chat that you had some other issues on your sites, how did you use Upfront on them?

    Best regards,
    Predrag

  • Adam

    Hi Predrag

    What does this have to do with the icons not displaying correctly?

    I built this site using Upfront Editor on another website, and then restored this to this site and then edited this here using Upfront Editor.

    I don't know if it is on parent or child theme, I clicked on Upfront Builder, and then I clicked on Upfront editor, then edited the theme, I didn't see anything to choose between parent or child theme.

    Great that you created the starter themes for this reason, but no-one communicated this to me in the dialog boxes when setting up a theme, when I was starting to build in Upfront.

    Your post reads more like a lecture than someone wanting to help with an issue.

    How about some assistance now?

    Cheers

    Adam

  • Predrag Dubajic

    Hi Adam,

    Apologies if that sounded like a lecture, it was not my intention, I'm just trying to collect enough information about the issue because I was unable to replicate this on my test site or our demo themes.

    Upfront parent theme in themes panel has a text on image that states activation is not required, also, when parent theme is active the content of your site will state to install child theme or use Upfront Builder to create your own.
    This is because all changes should be made only on child themes with either Upfront Editor or Upfront Builder, depending on if you're creating your own theme or editing existing one.

    Using a parent theme and making changes there is not something Upfront is designed for and when I test it this way on my site I can see the same issue there.

    I will need to forward this issue to our developers to investigate further but you should create your own child theme and work on that because we don't know what kind of issues you may encounter while using parent theme as active theme.
    You can find more info about using Upfront and Upfront Builder here:
    https://premium.wpmudev.org/docs/upfront-and-themes/using-the-upfront-builder/

    Best regards,
    Predrag

  • Predrag Dubajic

    Hi Adam,

    After some further investigation the issue seems related to being logged-out and not because of the mobile device, if you login on your mobile you should see the icons again.
    This issue is related to parent theme being set as active theme and unfortunately there's no easy fix since it will require quite a lot changes in parent theme as it was not designed to work this way.

    You mentioned above that on the site you moved from you used Upfront Builder, this suggests that you were actually working on a child theme because Upfront Builder can't be used on Parent theme at all.

    So it's possible that during the move process something went wrong and you ended up applying the changes to parent theme instead of the child.

    Do you still have your old installation and could you try doing the migration process again but this time make sure that both Parent and Child theme are installed on your new site and only restore the Database after that?

    Best regards,
    Predrag

  • Adam

    Solve for this problem is inserting the following code into Simple Custom CSS or similar CSS plugin (not into Upfront Global CSS, as it doesn't work from there)

    Change <full-site-address> with the fully qualified site URL - e.g. https://www.wisdomtree.com.au

    /* Enter Your Custom CSS Here */
    /*Adam Winchester - http://www.wisdomtree.com.au*/
    /* icomoon fonts */
    @font-face {
    font-family: 'icomoon';
    src: url('<full-site-address>/wp-content/themes/upfront/fonts/icomoon.eot?taxgy5');
    src: url('<full-site-address>/wp-content/themes/upfront/fonts/icomoon.eot?taxgy5#iefix') format('embedded-opentype'),
    url('<full-site-address>/wp-content/themes/upfront/fonts/icomoon.woff?taxgy5') format('woff'),
    url('<full-site-address>/wp-content/themes/upfront/fonts/icomoon.ttf?taxgy5') format('truetype'),
    url('<full-site-address>/wp-content/themes/upfront/fonts/icomoon.svg?taxgy5#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    .uf_font_icon, .uf_font_icon *{
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    position: relative;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }
    #wpadminbar .upfront-edit_layout .ab-icon:before,
    .toplevel_page_upfront .dashicons-admin-generic:before {
    font-family: icomoon;
    content: "\e900";
    font-size: 20px;
    top: 1px;
    }