Home>Support>Origami – Default glyphs on mobile and tags

Origami – Default glyphs on mobile and tags

Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

I don’t know what changed, but the “Hamburger” icon for

#menu .mobilenav-main-link .mobile-nav-icon:before {
	content: "e601";
}

returns just a default square glyph now. I tried it on Safari and Chrome, same result.

I was able to change out the tag icon to a red heart (preferred in this case) by declaring it in my child theme, and if I declare a similar style for the mobile icon with entity “2630” instead of the “e601”, then I can get it to work; but I’m worried I will run into more instances of icons not rendering properly and I’d like to get a better understanding of icon fonts in this theme and why they may have changed.

Thanks,
Mitch

URL: http://karenpetty.com/dev

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 9 months ago mitchpowell

    ^^^my backslashes got stripped out from in front of the Unicode (or whatever the other one ls called) entities.^^^

  2. 10 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    Hi Mitch

    Can I confirm this is the domain we’re discussing: http://karenpetty.com/dev/ ?

    I’m not seeing Font Awesome being imported in the source. Can you let me know how you’re handling that?

  3. 10 years, 9 months ago mitchpowell

    Hi Andrew,
    Yes. That is the one. However, when I go to demo.siteorigin.com/origami/premium…, I don’t see many of the font icons in use there either. Your mobile nav symbol is a .png, and there are no social icons or tag icons, etc., so now I’m quite confused.

    I modified my header.php (and made a copy of it in my child theme) thusly:

     <?php // I want the home page not to have the menu, but all the other pages to have it  ?>
    		<?php if ( !is_front_page() ): get_template_part('parts/menu', 'top'); endif; ?> 

    but that doesn’t seem to have anything to do with Font Awesome (although it does call /parts/menu-top.php.)

  4. 10 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    Phew, ok, I’m confused now too. Are you sure you aren’t confusing Origami and Vantage. Vantage is our theme that has Font Awesome bundled. If you need to add menu icons to Origami the easiest way is to use:

    https://wordpress.org/plugins/menu-icons/

    I recommend that same plugin for Vantage if clients need to add menu icons to links and not just pages. Perhaps give it a try and let me know if it does the trick.

  5. 10 years, 9 months ago mitchpowell

    I began development with Origami, and then decided the features of Origami Premium were worth the $15 I spent. I’ve never tried, installed, or gone near, Vantage. I figured I liked the social icons after each post, and the ‘tag’ icon, and the ‘hamburger’ (mobile nav icon, et al.

    I don’t know where they came from, unless it’s part of PageBuilder? Or… aha? Perhaps it’s coming from Yoast’s WordPress SEO -> Social ?? (Even though I have yet to link a FB, Twitter, or Google+ account, I do have “Add Open Graph meta data” checked.

    I just did a multi-file search in a clean version of Origami Premium, for the word ‘icon.’
    /…/…/origami-2.6.1-full-premium-version/origami/style.css

    Line 302, Line 312, etc….

     #menu .mobilenav-main-link .mobile-nav-icon{
    	font-family: origami-icons;
    	color: #666666;
    	font-size: 15px;
        display: block;
    	float: left;
        width: 13px;
        height: 15px;
        margin: -1px 8px 0 0;
    }
    
    #menu .mobilenav-main-link .mobile-nav-icon:before {
    	content: "\e601";
    }
     

    That tells me that Origami Premium must have some font-family called “origami-icons,” but until I go searching further, I guess as long as I have the ‘tag’ icon and the ‘hamburger’ (mobile nav icon) working, I’ll carry on and not worry about it.

    In my exploring of the theme, I don’t recall ever seeing ‘Font Awesome’ referenced anywhere, and I don’t have a real full understanding of icon fonts. You’re the one who brought up Font Awesome. All I know is when I got Origami Premium and began working with it, the social icons and tag icon, and nav icon were all desirable enough, but when they stopped working was when I began wondering what I needed to get them working again.

    Thank you for looking into it. I’ll deal with any future issues when they crop up. I may look into the plugin you mention as well. Thanks,
    Mitch

  6. 10 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    Thanks for the update. Apologies for the hassle, I’m with you now. Bit of a manic Monday, sincere apologies. Your CSS is correct. You could confirm that the following files are available at /css/icons/

    origami-icons.eot
    origami-icons.svg
    origami-icons.ttf
    origami-icons.woff

    Those files are included starting at line 1449 in the parent CSS.

    Following that I’m struggling to see what might be causing this. We could perhaps try taking that entire @font-face declaration from line 1449 onwards and pasting it into the child stylesheet and make all the urls absolute.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More