CSS Sprite и шрифты значок

эльф

1. Почему спрайт
   • Для того, чтобы эффективно сократить количество входящих и исходящих запросов сервера, загрузку страницы быстрее. Появление технологии CSS Sprites
2. Используйте спрайт (спрайты) из
   • Мастер технологии в основном для фонового изображения. Это интегрировать несколько небольших фоновое изображение на большую картину.
   • Большая картина также известна как спрайты Sprite спрайт или карта
   • положение изображения Мобильный фон, используя фон положение
   • Расстояние составляет й и у координаты целевого изображения. Обратите внимание, что координаты страницы отличается
   • При использовании спрайтов требует точного профиля, малого размера и расположения каждого фонового изображения

значок шрифты

1. В основном используется для отображения веб-страниц вообще, обычно используется маленький значок
2. Sprite недостатки
   • Файлы изображений большие
   • Увеличение и уменьшение изображения сама будет искажена
   • После того как вы создали изображение, которое вы хотите заменить комплекс
3. Шрифт значки значка обеспечивает удобный и эффективный способ использования интерфейсных инженеров, показать значок, в основном в пределах шрифта
4. преимущество
   • Легкий вес: значок шрифт меньше, чем серии изображений, шрифты, после загрузки, значок будет оказан немедленно, уменьшить запросы сервера
   • Гибкость: на самом деле, суть текста, может быть очень случайным изменение цвета, тени, прозрачность, вращение и т.д.
   • Совместимость: поддерживает почти все браузеры
   • [Примечание]
     • Шрифты значок не может заменить технический мастер, но активизировать работу иконки части технологии и оптимизаций
5. Скачать иконку Font
   • icomoon библиотека шрифтов http://icomoon.io
   • Али iconfont шрифта библиотеки HTTP: //www.iconfontcn/
6. Введение значка шрифта
   • Загрузить пакет в папку шрифтов на страницу каталога корневой
   • В глобальном стиле жизни шрифта CSS: Простой, чтобы понять эти файлы шрифтов, внесенные в нашу страницу с помощью CSS
   • Добавить маленькую иконку в теге HTML
   • 
7. Дополнительный значок шрифта
   • Сжатый внутри selection.json новой загрузки, а затем выберите новый значок, который вы хотите повторно загрузить архив и заменить исходный файл

CSS треугольник живописи

div{
                width:0;
                height:0;
                line-height: 0;
                font-size: 0;
                border: 50px solid transparent;
                border-left-color: black;
}