This page is about icons. They represent symbolic image.
Unicode Block Miscellaneous Symbols From U+2600 to U+26FF
See also: Icon font for special icon font.
with the Telephon
.icon-phone:before {
content: "\260e";
color: gray;
font-size: 3em
}
<span class="icon-phone"></span>
To show an icon via a custom font glyph, you would:
Example with material icon
The character <pre></pre> is the icon plus: <span class="icon"></span>
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIcons-Regular.woff2) format('woff2'),
url(https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIcons-Regular.woff) format('woff'),
url(https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIcons-Regular.ttf) format('truetype');
}
.icon {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
A font can add ligatures. A ligature is a combination of characters that represents another character.
As the Material Icons font has the ligature add that points to the character , you can replace the code point  of our previous example by the word add. And you will obtain the same result.
Example:
The icon <mark>add</mark> given by its name: <span class="icon">add</span>
The hamburger menu icon.
img {
display: inline-block;
width: 3em;
height: 3em;
vertical-align: middle;
content: "";
background: no-repeat center center;
background-size: 100% 100%;
}
<img src="data:image/svg+xml;charset=utf8,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>"/>
<!-- Could be also as a file -->
<!-- <img src="public/sound-mute.svg" style="max-height: 40px; max-width: 40px;">-->
.navbar-toggler-icon {
background-image: url('data:image/svg+xml;charset=utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17" height="17" viewBox="0 0 17 17"><g></g><path d="M17 16v1h-17v-1h17zM12 10h2v5h1v-6h-4v6h1v-5zM7 7h2v8h1v-9h-4v9h1v-8zM2 3h2v12h1v-13h-4v13h1v-12z" fill="rgb(62,153,239)" /></svg>');
}
.navbar-toggler-icon {
display: inline-block;
width: 3em;
height: 3em;
vertical-align: middle;
content: "";
background-size: 100% 100%;
}
<span class="navbar-toggler-icon"></span>
Icons can be represented:
Icons are files that are:
Embedding them with the HTML img element means that the browser needs to perform a lot of HTTP requests.
That's why they are generally grouped into a single file:
This file is then configured to be cached into the browser after the first HTTP fetch.
An icon or logo may have subtly different designs at different sizes, such as:
With a vector font (svg or font), you can’t have alternative designs for different font sizes.
Raster images are not scalable without losing information while vector images are fully scalable.
<svg width="15" height="14" viewBox="0 0 15 14"/>
Inkscape guide: Inkscape_Guide.md
Others:
React: