This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Origami – Default glyphs on mobile and tags

11 years ago · Last reply by Andrew Misplon 11 years ago

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.

Need fast email support? Get SiteOrigin Premium

Replies

6
  1. mitchpowell 11 years, 4 months ago

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

  2. Andrew Misplon Staff 11 years, 4 months ago

    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. mitchpowell 11 years, 4 months ago

    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. Andrew Misplon Staff 11 years, 4 months ago

    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. mitchpowell 11 years, 4 months ago

    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. Andrew Misplon Staff 11 years, 4 months ago

    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.

Have a different question or issue?

Start New Thread