Задать вопрос
Outoverlay
@Outoverlay
javascript

Есть иконки и в формате svg, и если использовать шрифт css, то они не работают, почему?

<html>
<head>
<meta charset="UTF-8">


<style class="cp-pen-styles">
.lnr {
    font-family: 'svg';
  display: inline-block;
  fill: currentColor;
  width: 1em;
  height: 1em;
  vertical-align: -0.05em;
}
@font-face {
    font-family: 'svg';
    src: url(data:text/plain;charset=utf-8;base64,PHN2ZyBkaXNwbGF5PSJub25lIiB3aWR0aD0iMCIgaGVpZ2h0PSIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDxkZWZzPg0KICAgICAgICAgICAgPHN5bWJvbCBpZD0ibG5yLWNoZXZyb24tbGVmdCIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCI+DQogICAgICAgICAgICAgICAgICAgIDx0aXRsZT5jaGV2cm9uLWxlZnQ8L3RpdGxlPg0KICAgICAgICAgICAgICAgICAgICA8cGF0aCBjbGFzcz0icGF0aDEiIGQ9Ik03MTYuOCAxMDI0YzYuNTUyIDAgMTMuMTAyLTIuNDk5IDE4LjEwMS03LjQ5OSA5Ljk5OC05Ljk5NyA5Ljk5OC0yNi4yMDYgMC0zNi4yMDNsLTQ0Mi42OTgtNDQyLjY5OCA0NDIuNjk4LTQ0Mi42OTljOS45OTgtOS45OTcgOS45OTgtMjYuMjA2IDAtMzYuMjAzcy0yNi4yMDYtOS45OTgtMzYuMjAzIDBsLTQ2MC44IDQ2MC44Yy05Ljk5OCA5Ljk5Ny05Ljk5OCAyNi4yMDYgMCAzNi4yMDNsNDYwLjggNDYwLjhjNSA1IDExLjU1IDcuNDk5IDE4LjEwMiA3LjQ5OXoiPjwvcGF0aD4NCiAgICAgICAgICAgIDwvc3ltYm9sPg0KICAgICAgICAgICAgPHN5bWJvbCBpZD0ibG5yLWNoZXZyb24tcmlnaHQiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPg0KICAgICAgICAgICAgICAgICAgICA8dGl0bGU+Y2hldnJvbi1yaWdodDwvdGl0bGU+DQogICAgICAgICAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJwYXRoMSIgZD0iTTI1NiAxMDI0Yy02LjU1MiAwLTEzLjEwMi0yLjQ5OS0xOC4xMDEtNy40OTktOS45OTgtOS45OTctOS45OTgtMjYuMjA2IDAtMzYuMjAzbDQ0Mi42OTgtNDQyLjY5OC00NDIuNjk4LTQ0Mi42OTljLTkuOTk4LTkuOTk3LTkuOTk4LTI2LjIwNiAwLTM2LjIwM3MyNi4yMDYtOS45OTggMzYuMjAzIDBsNDYwLjggNDYwLjhjOS45OTggOS45OTcgOS45OTggMjYuMjA2IDAgMzYuMjAzbC00NjAuOCA0NjAuOGMtNSA1LTExLjU1IDcuNDk5LTE4LjEwMiA3LjQ5OXoiPjwvcGF0aD4NCiAgICAgICAgICAgIDwvc3ltYm9sPg0KICAgICAgICAgICAgPHN5bWJvbCBpZD0ibG5yLWFycm93LXVwIiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0Ij4NCiAgICAgICAgICAgICAgICAgICAgPHRpdGxlPmFycm93LXVwPC90aXRsZT4NCiAgICAgICAgICAgICAgICAgICAgPHBhdGggY2xhc3M9InBhdGgxIiBkPSJNNDY4LjI5OSAzMy4wOTlsLTMwNy4yIDMwNy4yYy05Ljk5NyA5Ljk5Ny05Ljk5NyAyNi4yMDYgMCAzNi4yMDMgOS45OTggOS45OTggMjYuMjA2IDkuOTk4IDM2LjIwNSAwbDI2My40OTYtMjYzLjQ5OHY4MzQuMTk1YzAgMTQuMTM4IDExLjQ2MSAyNS42IDI1LjYgMjUuNnMyNS42LTExLjQ2MiAyNS42LTI1LjZ2LTgzNC4xOTVsMjYzLjQ5OSAyNjMuNDk2YzkuOTk3IDkuOTk4IDI2LjIwNiA5Ljk5OCAzNi4yMDMgMCA0Ljk5OC00Ljk5OCA3LjQ5OC0xMS41NDkgNy40OTgtMTguMTAxcy0yLjQ5OS0xMy4xMDItNy40OTktMTguMTAxbC0zMDcuMi0zMDcuMmMtOS45OTctOS45OTgtMjYuMjA1LTkuOTk4LTM2LjIwMiAweiI+DQogICAgICAgICAgICAgICAgICAgIDwvcGF0aD4NCiAgICAgICAgICAgIDwvc3ltYm9sPg0KICAgIDwvZGVmcz4NCjwvc3ZnPg==);
}
.lnr-chevron-left {
    font-family: 'svg';
    color: #eebecf;
    font-size: 40px;
}
</style></head><body>
<svg class="lnr lnr-chevron-left"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#lnr-chevron-left"></use></svg>


<div id="dsvsdv"></div>

</body></html>


P.s
Никогда раньше не работал с созданием шрифтов

Зато работает так:

<html>
<head>
<meta charset="UTF-8">


<style class="cp-pen-styles">
.lnr {
  display: inline-block;
  fill: currentColor;
  width: 1em;
  height: 1em;
  vertical-align: -0.05em;
}

.lnr-chevron-left {
    color: #eebecf;
    font-size: 40px;
}
</style></head><body>
<svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
            <symbol id="lnr-chevron-left" viewBox="0 0 1024 1024">
                    <title>chevron-left</title>
                    <path class="path1" d="M716.8 1024c6.552 0 13.102-2.499 18.101-7.499 9.998-9.997 9.998-26.206 0-36.203l-442.698-442.698 442.698-442.699c9.998-9.997 9.998-26.206 0-36.203s-26.206-9.998-36.203 0l-460.8 460.8c-9.998 9.997-9.998 26.206 0 36.203l460.8 460.8c5 5 11.55 7.499 18.102 7.499z"></path>
            </symbol>
            <symbol id="lnr-chevron-right" viewBox="0 0 1024 1024">
                    <title>chevron-right</title>
                    <path class="path1" d="M256 1024c-6.552 0-13.102-2.499-18.101-7.499-9.998-9.997-9.998-26.206 0-36.203l442.698-442.698-442.698-442.699c-9.998-9.997-9.998-26.206 0-36.203s26.206-9.998 36.203 0l460.8 460.8c9.998 9.997 9.998 26.206 0 36.203l-460.8 460.8c-5 5-11.55 7.499-18.102 7.499z"></path>
            </symbol>
            <symbol id="lnr-arrow-up" viewBox="0 0 1024 1024">
                    <title>arrow-up</title>
                    <path class="path1" d="M468.299 33.099l-307.2 307.2c-9.997 9.997-9.997 26.206 0 36.203 9.998 9.998 26.206 9.998 36.205 0l263.496-263.498v834.195c0 14.138 11.461 25.6 25.6 25.6s25.6-11.462 25.6-25.6v-834.195l263.499 263.496c9.997 9.998 26.206 9.998 36.203 0 4.998-4.998 7.498-11.549 7.498-18.101s-2.499-13.102-7.499-18.101l-307.2-307.2c-9.997-9.998-26.205-9.998-36.202 0z">
                    </path>
            </symbol>
    </defs>
</svg>
<svg class="lnr lnr-chevron-left"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#lnr-chevron-left"></use></svg>






</body></html>
  • Вопрос задан
  • 385 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 2
Noflex
@Noflex
Frontend-разработчик/UI-дизайнер
https://developer.mozilla.org/en-US/docs/Web/SVG/T...

Скорее всего, у вас неправильно подготовлен svg к использованию в качестве шрифта.
Ответ написан
Комментировать
Комментировать
trushka
@trushka
какая-то у вас фигня в первом коде)) Шрифт то как работает: какому-то символу задаётся определённая svg-фигура. то есть в вашем случае, это какие-то стрелочки, судя по названию) Ну, можно их присвоить символам < и >, например.. Но мне кажется, для вашего случая лучше svg в качестве background'a применять
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Бэкэнд-разработчик JavaScript
Wanted. • Москва
от 250 000 до 400 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Автоматизация ChatGPT и постинга
26 дек. 2024, в 21:01
10000 руб./за проект
Подготовка документации для производства платы
26 дек. 2024, в 20:52
40000 руб./за проект
Сделать сайт на Wordpress (или предложить свое)
26 дек. 2024, в 18:20
35000 руб./за проект
Ещё заказы