Entypo, genericons don't show up

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="https://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?

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!

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?

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.

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?

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).

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

@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?