При написании на передних страницах мы часто используем несколько картинок, таких как маленькие значки. Если вы используете картинку, код более хлопот. Недавно я нашел удобный и практический метод, просто используйте его напрямую.1. Внедрить методы работы с изображением
Сначала мы вводим URL: https://www.iconfont.cn/
Если вы не можете вспомнить этот веб -сайт, вы можете искать на Baidu: Alibaba Vectors, и этот сайт появится;
Вот два более часто используемых и удобных метода.
Метод 1: Ссылка на класс шрифтаШаг 1: Введите веб -сайт, и мы можем увидеть поле поиска, напрямую введите имя значка, которое вы хотите, или вы можете найти его в библиотеке значков.
Шаг 2: затем добавьте в корзину.
Шаг 3: Нажмите на корзину, чтобы создать новый проект, и подтвердите, что если вы хотите добавить изображение в тот же проект, вам не нужно воссоздать его снова.
Шаг 4: Далее появится следующая страница, скопируйте код и ссылайтесь на кодовый документ.
<link rel = styleSheet href = http: //at.alicdn.com/t/font_1587841_2580lrwj551.js>
Шаг 5: При введении кода не забудьте добавить http:
Шаг 6: Выберите соответствующий значок и получите имя класса для копирования и вставки, используйте no-referrer src =/img/bvbb5hz/view src = https: //cdn.segmentfault.com/v-5e05cb79/global/img/squares.svg title = image.jpg>
<body> <i class/= iconfont icon-xxx> </i> </body>Метод 2: Ссылка на символ
Шаг 1: Если проект хочет использовать несколько значков, вы также можете выбрать значки, которые вы хотите использовать, и добавить их в корзину покупок, затем нажмите код обновления, а затем обновить ссылочное соединение кода. Этот метод должен быть загружен локально.
Шаг 2: После загрузки вы можете увидеть несколько файлов в папке и ввести файлы JS на кодовой странице.
<link rel = styleSheet href = http: //at.alicdn.com/t/font_1587841_2580lrwj551.js> <script src = iconfont.js> </script>
Шаг 3: Поместите пакет файлов в тот же каталог, чтобы вступить в силу ссылка на значок.
Шаг 4: На тот же метод нам нужно обратиться к имени изображения под значком, скопировать и вставить имя изображения в SVG, и заменить href = изменить имя.
<svg class = icon aria-hidden = true> <use xlink: href =#icon-079aiqing> </use> </svg>
Шаг 5: В дополнение к представлению двух вышеуказанных адресов файлов на кодовой странице, нам также необходимо представить код стиля.
<style> .icon {width: 1em; высота: 1ем; Вертикальный аровка: -0.15em; Fill: CurrentColor; переполнение: скрыто; } </style>Ниже приведены все коды для справки
<! Doctype html> <html lang = en> <head> <meta charset = utf-8> <meta name = viewport content = width = width-width, начальная масштаба = 1.0> <meta http-equiv = x-ua-complayable content = ie = edge> <tite> alibaba evect href = http: //at.alicdn.com/t/font_1587841_2580lrwj551.js> <script src = iconfont.js> </script> </head> <style> .icon {width: 1em; высота: 1ем; Вертикальный аровка: -0.15em; Fill: CurrentColor; переполнение: скрыто; } </style> <body> <input type = text placeholder = search> <svg class = icon aria-hidden = true> <use xlink: href =#icon-079aiqing> </use> </svg> </body> </html>Эффект кода:
Суммировать:Первый метод может быть использован непосредственно, введя его, что быстро и удобно, и не требует загрузки, что удобнее использовать. Недостатки могут использоваться только в одиночку и не поддерживают цвет.
Второй метод поддерживает многоцветные и несколько изображений, и эффект внедрения нескольких изображений будет лучше. Недостатки необходимо загрузить в локальный пакет файлов и должны быть размещены в том же каталоге перед использованием.
В целом, Alibaba Vector Graphics очень полезна для разработчиков фронт-энда и свободно использовать. Вы можете использовать приведенные выше методы в соответствии с вашими потребностями.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.