Assuming you want to add the icon before an element identified by the some specific CSS selector, (let’s just use #css-selector, for exemplification), add this to Dashboard > Appearance > Customize > custom CSS or in your child theme’s style.css:
#css-selector:before {
content: "\1F4DE";
display: inline-block;
font-family: 'entypo';
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
From DOM’s point of view, #css-selector:before is a child of #css-selector, hence you could use any CSS declarations to further customize it, the most common being: padding, margin, font-size, top, color and opacity. In order to change the icon with another, just use the U+hexcode from entypo charmap, but replace U+ with a backslash (\).
On the other hand, if you only want to display entypo icons inline, declare a custom class (let’s call it .entypo-class) in your CSS:
.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;
}
and add your entypo code in your html like this
<span class="entypo-class">📞 ;</span>
Please note that I couldn’t use the correct html entity in the span, as WP forum automatically changes it into the actual html entity, so you need to remove the space between the code and the finishing semi-colon (;). Also please note that this time you need to use the HTML entity code of the icon. I used the telephone as you mentioned it above. Again, you’re free to add CSS declarations to further customize the look and feel of your icons, but try to leave the ones declared above unchanged. They are a reset of the font, making sure it will render properly in most situations, regardless of the text properties of the context.
