<a href='' itemscope itemtype='http://schema.org/Brand' itemprop='brand'><i class="logo" itemprop='logo'></i></a>
The above class='logo'
applies a font to the icon element. Can we apply the 'glyph' defined in the class (e.g., font-family: 'AnyFont'; content: '/e600'
) as a Microdata Markup DataType "Brand > Logo" to render the Logo in a rich-snippet the same as a image would render in the rich-snippet?
This doesn't seem likely as an image has a URL based src="..."
property and a font character does not, none the less I've been researching this I've found no documentation or discussion on this and need to know if the community is aware of a way to make this work if it does't already work. Or do we have to forfeit the many well-known benefits of using an icon-font to display a logo in rich-snippets?
As validation to the common application of microdata to an image and not an font-character we see that this heavily used microdata generator doesn't give us an option to apply microdata to an element with a font applied to it. And based on the 'Brand > Logo' documentation, the only options are ImageObject
and URL
(which many very well may believe this answers the question (there's bound to be a way to do this without having to go back 4 years and use an image instead of a font)).
You could use a link
element (which may be used in the body
in HTML5+Microdata) to provide the URL of the logo:
<a itemprop="brand" href="" itemscope itemtype="http://schema.org/Brand">
<span class="logo"></span>
<link itemprop="logo" href="logo.png" />
</a>
(I used span
instead of i
. And for the record, I don’t agree that it’s a good idea to include a site’s logo via CSS instead of HTML.)