<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>
Простой
