@prefix sioc: <http://rdfs.org/sioc/ns#> .
@prefix dc: <http://purl.org/dc/elements/1.1/> .
@prefix dcterms: <http://purl.org/dc/terms/> .
@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .
@prefix content: <http://purl.org/rss/1.0/modules/content/> .
@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .

<https://lhero.org/portfolio/lh-2015/>
  a sioc:Post ;
  dc:title "Icons" ;
  dcterms:identifier 148583 ;
  dc:modified "2026-09-27T16:06:58Z"^^xsd:dateTime ;
  dc:created "2026-09-27T15:57:09Z"^^xsd:dateTime ;
  sioc:link <https://lhero.org/portfolio/lh-2015/icons/> ;
  sioc:has_creator <https://lhero.org/author/1/#account> ;
  sioc:has_container <https://lhero.org/#posts> ;
  content:encoded """<ul class="lh_portfolio-meta"><li><strong>Part of:</strong> <a href="https://lhero.org/portfolio/lh-2015/">LH 2015</a></li></ul>
<p class="wp-block-paragraph">Since 2.10.0 LH 2015 draws its icons as SVG images masked in the text colour, instead of the Genericons icon font. The icons are Genericons Neue (generic icons) and Social Logos (brands), both by Automattic, plus the handset from Dashicons (WordPress), all under the GPL v2 or later. They live in the theme stylesheet (section 2.0 Icons), so no extra file is loaded.</p>



<h2 class="wp-block-heading">Using the icon variables</h2>



<p class="wp-block-paragraph">Each icon is a CSS custom property on <code>:root</code> named <code>--lh-icon-{name}</code>. An icon pseudo-element takes its image from <code>--lh-icon</code>, so a site changes an existing icon (for example a social menu link) by setting only that variable in its Styles custom CSS:</p>



<pre class="wp-block-code"><code>.social-navigation a[href*="example.com"]:before {
	--lh-icon: var(--lh-icon-link);
}</code></pre>



<p class="wp-block-paragraph">The icon is 1em square, so <code>font-size</code> sets its size, and it takes the text colour. A site can add icons of its own by defining another <code>--lh-icon-{name}</code> on <code>:root</code> as a percent-encoded SVG data URI.</p>



<h2 class="wp-block-heading">Available icons</h2>



<p class="wp-block-paragraph">Generic: share, expand, collapse, menu, close, previous, next, aside, picture, gallery, video, status, quote, link, chat, audio, month, user, category, tag, comment, zoom, edit, external, heart, mail, feed, fullscreen, send-to-phone, refresh, hide, show, print, phone (a mobile phone), handset (a telephone receiver), search, download, subscribe.</p>



<p class="wp-block-paragraph">Brands: codepen, dribbble, dropbox, facebook, flickr, foursquare, github, instagram, linkedin, pinterest, reddit, tumblr, twitter, vimeo, wordpress, youtube, spotify, twitch, x, mastodon, bluesky, threads, whatsapp.</p>



<h2 class="wp-block-heading">Social links menu</h2>



<p class="wp-block-paragraph">Links in the Social Links Menu get a brand icon by URL: CodePen, Dribbble, Dropbox, Facebook, Flickr, Foursquare, GitHub, Instagram, LinkedIn, Pinterest, Reddit, Tumblr, Twitter (twitter.com), X (x.com), Mastodon (any URL containing mastodon), Bluesky (bsky.app), Threads, WhatsApp (whatsapp.com and wa.me), Vimeo, WordPress, YouTube, Spotify and Twitch. Email links get the mail icon, phone (tel:) links the handset, links ending in /feed/ the feed icon, and anything else the share icon.</p>
"""^^rdf:XMLLiteral ;
  sioc:content """Part of: LH 2015
Since 2.10.0 LH 2015 draws its icons as SVG images masked in the text colour, instead of the Genericons icon font. The icons are Genericons Neue (generic icons) and Social Logos (brands), both by Automattic, plus the handset from Dashicons (WordPress), all under the GPL v2 or later. They live in the theme stylesheet (section 2.0 Icons), so no extra file is loaded.



Using the icon variables



Each icon is a CSS custom property on :root named --lh-icon-{name}. An icon pseudo-element takes its image from --lh-icon, so a site changes an existing icon (for example a social menu link) by setting only that variable in its Styles custom CSS:



.social-navigation a[href*="example.com"]:before {
	--lh-icon: var(--lh-icon-link);
}



The icon is 1em square, so font-size sets its size, and it takes the text colour. A site can add icons of its own by defining another --lh-icon-{name} on :root as a percent-encoded SVG data URI.



Available icons



Generic: share, expand, collapse, menu, close, previous, next, aside, picture, gallery, video, status, quote, link, chat, audio, month, user, category, tag, comment, zoom, edit, external, heart, mail, feed, fullscreen, send-to-phone, refresh, hide, show, print, phone (a mobile phone), handset (a telephone receiver), search, download, subscribe.



Brands: codepen, dribbble, dropbox, facebook, flickr, foursquare, github, instagram, linkedin, pinterest, reddit, tumblr, twitter, vimeo, wordpress, youtube, spotify, twitch, x, mastodon, bluesky, threads, whatsapp.



Social links menu



Links in the Social Links Menu get a brand icon by URL: CodePen, Dribbble, Dropbox, Facebook, Flickr, Foursquare, GitHub, Instagram, LinkedIn, Pinterest, Reddit, Tumblr, Twitter (twitter.com), X (x.com), Mastodon (any URL containing mastodon), Bluesky (bsky.app), Threads, WhatsApp (whatsapp.com and wa.me), Vimeo, WordPress, YouTube, Spotify and Twitch. Email links get the mail icon, phone (tel:) links the handset, links ending in /feed/ the feed icon, and anything else the share icon.
""" ;
  sioc:topic <https://lhero.org/?taxonomy=author&term=cap-1> .

<https://lhero.org/author/1/#account> rdfs:seeAlso <https://lhero.org/author/1/?feed=lhrdf&format=turtle> .
<https://lhero.org/?taxonomy=author&term=cap-1> rdfs:seeAlso <https://lhero.org/?taxonomy=author&term=cap-1&feed=lhrdf&format=turtle> .