WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Entypo, genericons don't show up (9 posts)

  1. J123456
    Member
    Posted 5 months ago #

    I have done the best search I can of this forum using google but can't find this answered anywhere, so here goes:

    I have been trying to use entypo or genericons inline in pages (eg. on buttons or in paragraphs) without success. I have tried using the html for genericons:
    <span class="genericon genericon-show"></span>
    and the unicode(?) for entypo:
    & #59226; (space added after & so you can read it)

    Neither works. I have tried inserting a new css class that was somewhere on the forum for something else:

    .entypo-class {
    	display: inline-block;
    	font-family: 'entypo';
    	speak: none;
    	font-weight: normal;
    	font-variant: normal;
    	text-transform: none;
    	line-height: 1;
    	-webkit-font-smoothing: antialiased;
    	font-size: xx-large;
    }

    but using
    <span class="entypo-class"> & #59226; </span> doesn't work either...

    Any ideas?

    I have a new wordpress website using Customizr as the theme. I have a child theme and have done some modifications here and there (eg. slider size).

    Thanks!

  2. rdellconsulting
    Member
    Posted 5 months ago #

    If you examine how Nic has done it to produce a standard post heading using genericons:

    HTML

    <h2 class="entry-title format-icon">
    <a rel="bookmark" title="Permalink to Standard Post" href="http://www.customizr.dev/standard-post/">Standard Post</a>

    CSS

    article.format-standard .format-icon:before {
      content: "";
      font-family: 'genericons';
      font-size: 1.5em;
      line-height: 25px;
      top: 12px;
    }
    .format-icon:before {
      font-family: 'entypo';
      font-size: 1.2em;
      font-variant: normal;
      font-weight: normal;
      line-height: 1;
      opacity: 0.2;
      padding-right: 10px;
      position: relative;
      text-transform: none;
      top: 8px;
    }

    The icons are generated using (for example):
    content: "\1F4C4"

    These can be picked up from link

    Maybe this helps?

  3. J123456
    Member
    Posted 5 months ago #

    Hi rdellconsulting,

    I have been trying to understand how it all works. I can't at the moment figure out how to add a CSS class that would work. I have worked out that using style="" can get it to work inline (ish).

    The below example works for entypo in customizr (remember no space after &).
    <a class="btn btn-info" style="font-family: 'entypo'; font-size: 1em; vertical-align:middle;">& #59226;</a></h3>
    But an additional problem seems to be that the font has excessive padding (3x height) above the actual icon so this looks odd.

    Doing similar with genericons doesn't seem to work:
    <a class="genericon genericon-show" style="font-family: 'genericons';"></a>

    The CSS way I tried that failed was:

    .genericonsabc {
    font-family: 'genericons';
    font-size: 2em;
    font-weight: normal;
    line-height: 0;
    }
    
    .genericonsabc.eye-icon:before{ content: '\f403'; }

    followed by:
    <a class="genericonsabc eye-icon"></a>

    Are there any reasons why this code wouldn't work?

    Cheers!

  4. J123456
    Member
    Posted 5 months ago #

    The padding issue for entypo is already known by the looks of it:
    https://github.com/danielbruce/entypo/issues/13
    https://github.com/danielbruce/entypo/issues/8

    on Windows the icons are rendered at the bottom of the character and on mac they are normal(centered), see my cheap representation below:

    Mac: ¦-¦ Windows:¦_¦

    There are better examples and pictures in the links above.

    Apparently fontello has a fixed version of this font but the official entypo version still is problematic. Something for Nikeo to be made aware of?

  5. rdellconsulting
    Member
    Posted 5 months ago #

    OK, I've flagged it to him.

    From memory, I remember a problem similar to:
    .genericonsabc.eye-icon:before{ content: '\f403'; }

    where the solution was to use double-quote, not single-quote. Also try a space after abc, so above would be:
    .genericonsabc .eye-icon:before{ content: "\f403"; }

    Preferable to get it working in your style.css rather than inline.

  6. J123456
    Member
    Posted 5 months ago #

    No luck im afraid. I've tried all permutations.

    Looking at the genericon RSS feed icons they have a class called 'social-icon' followed by the icon 'icon-feed' in this case. Using these two in a <a> tag on a page gives an unrecognised character... this is still an improvement on my CSS which doesn't produce anything.

    Something is missing but I can't tell what.

    Anyone managed to get these working?
    Any other ideas?

  7. ElectricFeet
    Member
    Posted 5 months ago #

    What you're missing here is the need to use the ":before" pseudo element.

    What you're currently trying to do is to style the text with an icon. But text is text and all the styling in the world will not make it become (or show) an icon. Instead, the ":before" pseudo element inserts the icon before the text.

    Customizr comes with some icons already set up. But there's no harm in defining your own from scratch. It will allow you to introduce some more intuitive names.

    The example below shows a telephone icon with entypo and a calendar icon with genericons, both of which are included in the theme.

    Your CSS will be:

    .my-telephone:before {
      font-family: 'entypo';
      content: "\1f4de";
      font-size: 3em;
      vertical-align: bottom;
    }
    .my-calendar:before {
      font-family: 'genericons';
      content: "\f306";
      font-size: 2em;
      vertical-align: bottom;
    }

    (You may need to do some more styling, depending on the icon and your preferences.)

    And the html is:

    <p><span  aria-hidden="true" class="my-telephone">Test of my-telephone class</span></p>
    <p><span  aria-hidden="true" class="my-calendar">Test of my-calendar class</span></p>

    You can enclose the text in the span, or not. Either way, it will show the icon before the text. Closing the span before the text starts has the advantage of being able to add more icons without it getting too confusing. (Maybe there's a CSS purist reason why it should be done one way or the other.)

    The aria-hidden="true" stops screen readers from trying to read the icon (you can also use speak: none; in the CSS if you want to offer further incantations to the CSS gods).

  8. nikeo
    Member
    Theme Author

    Posted 5 months ago #

    @J123456 thanks for reporting. This will be fixed in the next release.

  9. ElectricFeet
    Member
    Posted 5 months ago #

    @nikeo Now that Font Awesome is officially allowed in the WordPress repo, would it be worth investigating replacing genericons and entypo and all the problems they bring? (well, entypo seems to, anyway).

    Or would it just make things worse?

Reply

You must log in to post.

About this Theme

About this Topic