Mirrors/material-design-icons
2
0
Fork 0
mirror of https://github.com/google/material-design-icons.git synced 2026-02-20 00:51:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use <span> instead of <i> for icon HTML element, for examples too

Browse Source
This commit is contained in:
Roel Nieskens
2021-02-02 16:12:22 +01:00
parent 524a6572d4
commit 6eed39a37d
1 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
index.html
View File

@@ -170,8 +170,8 @@ self-hosting the font:</p>
<div class="icons-preview"><span class="material-icons">face</span></div>
<div class="icons-code"><code>&lt;i
class=&quot;material-icons&quot;&gt;face&lt;/i&gt;</code></div>
<div class="icons-code"><code>&lt;span
class=&quot;material-icons&quot;&gt;face&lt;/span&gt;</code></div>
<p></div></p>
<p>This example uses a typographic feature called
@@ -226,8 +226,8 @@ using numeric character references like the example below:</p>
<div class="icons-preview"><span class="material-icons">&#xE87C;</span></div>
<div class="icons-code"><code>&lt;i
class=&quot;material-icons&quot;&gt;&amp;#xE87C;&lt;/i&gt;</code></div>
<div class="icons-code"><code>&lt;span
class=&quot;material-icons&quot;&gt;&amp;#xE87C;&lt;/span&gt;</code></div>
<p></div></p>
<p>Find both the icon names and codepoints on the <a href="https://www.google.com/design/icons/">material icons library</a> by selecting any icon and opening the icon font panel. Each icon font has a codepoints index in our git repository showing the complete set of names and character codes (<a href="https://github.com/google/material-design-icons/tree/master/font">here</a>).</p>
@@ -261,8 +261,8 @@ alternative size, using the above CSS rules can help:</p>
<div class="icons-preview"><span class="material-icons md-18">face</span><div
class="icon-caption">18px</div></div>
<div class="icons-code"><code>&lt;i class=&quot;material-icons
md-18&quot;&gt;face&lt;/i&gt;</code></div>
<div class="icons-code"><code>&lt;span class=&quot;material-icons
md-18&quot;&gt;face&lt;/span&gt;</code></div>
<p></div></p>
<div class="icons-preview-code">
@@ -270,8 +270,8 @@ md-18&quot;&gt;face&lt;/i&gt;</code></div>
<div class="icons-preview"><span class="material-icons md-24">face</span><div
class="icon-caption">24px</div></div>
<div class="icons-code"><code>&lt;i class=&quot;material-icons
md-24&quot;&gt;face&lt;/i&gt;</code></div>
<div class="icons-code"><code>&lt;span class=&quot;material-icons
md-24&quot;&gt;face&lt;/span&gt;</code></div>
<p></div></p>
<div class="icons-preview-code">
@@ -279,8 +279,8 @@ md-24&quot;&gt;face&lt;/i&gt;</code></div>
<div class="icons-preview"><span class="material-icons md-36">face</span><div
class="icon-caption">36px</div></div>
<div class="icons-code"><code>&lt;i class=&quot;material-icons
md-36&quot;&gt;face&lt;/i&gt;</code></div>
<div class="icons-code"><code>&lt;span class=&quot;material-icons
md-36&quot;&gt;face&lt;/span&gt;</code></div>
<p></div></p>
<div class="icons-preview-code">
@@ -288,8 +288,8 @@ md-36&quot;&gt;face&lt;/i&gt;</code></div>
<div class="icons-preview"><span class="material-icons md-48">face</span><div
class="icon-caption">48px</div></div>
<div class="icons-code"><code>&lt;i class=&quot;material-icons
md-48&quot;&gt;face&lt;/i&gt;</code></div>
<div class="icons-code"><code>&lt;span class=&quot;material-icons
md-48&quot;&gt;face&lt;/span&gt;</code></div>
<p></div></p>
<h3 id="coloring">Coloring</h3>
@@ -310,8 +310,8 @@ light and dark backgrounds, respectively.</p>
<div class="icons-preview"><span class="material-icons md-dark">face</span><div
class="icon-caption">Normal</div></div>
<div class="icons-code"><code>&lt;i class=&quot;material-icons
md-dark&quot;&gt;face&lt;/i&gt;</code></div>
<div class="icons-code"><code>&lt;span class=&quot;material-icons
md-dark&quot;&gt;face&lt;/span&gt;</code></div>
<p></div></p>
<div class="icons-preview-code">
@@ -319,8 +319,8 @@ md-dark&quot;&gt;face&lt;/i&gt;</code></div>
<div class="icons-preview"><span class="material-icons md-dark
md-inactive">face</span><div class="icon-caption">Disabled</div></div>
<div class="icons-code"><code>&lt;i class=&quot;material-icons
md-dark md-inactive&quot;&gt;face&lt;/i&gt;</code></div>
<div class="icons-code"><code>&lt;span class=&quot;material-icons
md-dark md-inactive&quot;&gt;face&lt;/span&gt;</code></div>
<p></div></p>
<p>Example for drawing an icon on a dark background with a light foreground color:</p>
@@ -329,8 +329,8 @@ md-dark md-inactive&quot;&gt;face&lt;/i&gt;</code></div>
<div class="icons-preview icons-dark-bg"><span class="material-icons
md-light">face</span><div class="icon-caption">Normal</div></div>
<div class="icons-code"><code>&lt;i class=&quot;material-icons
md-light&quot;&gt;face&lt;/i&gt;</code></div>
<div class="icons-code"><code>&lt;span class=&quot;material-icons
md-light&quot;&gt;face&lt;/span&gt;</code></div>
<p></div></p>
<div class="icons-preview-code">
@@ -338,8 +338,8 @@ md-light&quot;&gt;face&lt;/i&gt;</code></div>
<div class="icons-preview icons-dark-bg"><span class="material-icons md-light
md-inactive">face</span><div class="icon-caption">Disabled</div></div>
<div class="icons-code"><code>&lt;i class=&quot;material-icons
md-light md-inactive&quot;&gt;face&lt;/i&gt;</code></div>
<div class="icons-code"><code>&lt;span class=&quot;material-icons
md-light md-inactive&quot;&gt;face&lt;/span&gt;</code></div>
<p></div></p>
<p>To set a custom icon color, define a CSS rule specifying the desired color for
@@ -351,8 +351,8 @@ the font:</p>
<div class="icons-preview"><span class="material-icons orange600">face</span><div
class="icon-caption">Normal</div></div>
<div class="icons-code"><code>&lt;i class=&quot;material-icons
orange600&quot;&gt;face&lt;/i&gt;</code></div>
<div class="icons-code"><code>&lt;span class=&quot;material-icons
orange600&quot;&gt;face&lt;/span&gt;</code></div>
<p></div></p>
<p><hr></p>