There are icons in the svg format, and if you use the css font, they do not work, why?

O

Outoverlay2015-12-29 18:47:56

JavaScript

Outoverlay, 2015-12-29 18:47:56

<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>

Ps
Never worked with creating fonts before.
But it works like this:

<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>

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

R

Roman Unt, 2015-12-29
@Noflex

https://developer.mozilla.org/en-US/docs/Web/SVG/T...
Most likely, your svg is not properly prepared for use as a font.

T

trushka, 2015-12-30
@trushka

some kind of garbage you have in the first code)) The font is how it works: a certain svg-figure is assigned to some character. that is, in your case, these are some kind of arrows, judging by the name) Well, you can assign them to the < and > symbols, for example .. But it seems to me that for your case it is better to use svg as a background