Press Ctrl / CMD + C to copy this to your clipboard.
This post will be reported to the moderators as potential spam to be looked at
Hello,
I have identified this in the backoffice!
To resolve this problem, i have modified your css background url for your SVG icon.
I have get your css "style.css" and i have modified the SVG in the url.
I have created a sass function to transform standard svg to url encoded svg.
// Replace letters @function str-replace($string, $search, $replace: '') { $index: str-index($string, $search); @if $index { @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); } @return $string; } // Encode symbols @function url-encode($string) { $map: ( "%": "%25", "<": "%3C", ">": "%3E", " ": "%20", "!": "%21", "*": "%2A", "'": "%27", '"': "%22", "(": "%28", ")": "%29", "{": "%7B", "}": "%7D", ";": "%3B", ":": "%3A", "@": "%40", "&": "%26", "=": "%3D", "+": "%2B", "$": "%24", ",": "%2C", "/": "%2F", "?": "%3F", "#": "%23", "[": "%5B", "]": "%5D" ); $new: $string; @each $search, $replace in $map { $new: str-replace($new, $search, $replace); } @return $new; } // Format the SVG as a URL @function inline-svg($string) { @return url('data:image/svg+xml;charset=utf8,#{url-encode($string)}'); }
You can use it like:
// Portion of your CSS .icon-umd-link { background: inline-svg("<svg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66.95 27.6'><defs><style>.cls-1{fill:none;stroke:#515054;stroke-linecap:round;stroke-linejoin:round;stroke-width:7.1px;}</style></defs><title>link</title><path id='Layer0_0_1_STROKES' data-name='Layer0 0 1 STROKES' class='cls-1' d='M62.4,12.75h5.35A10.16,10.16,0,0,1,77.95,23v0a11.1,11.1,0,0,1-.3,2.6,9.9,9.9,0,0,1-2.7,4.65,9.67,9.67,0,0,1-6.35,3,6.86,6.86,0,0,1-.85,0H52.15a9.88,9.88,0,0,1-7.25-3,9.9,9.9,0,0,1-2.7-4.65,11.1,11.1,0,0,1-.3-2.6v-.5M33.65,33.25H28.3a10.2,10.2,0,0,1-9.9-7.65A10.48,10.48,0,0,1,18.1,23v0a9.88,9.88,0,0,1,3-7.25,9.67,9.67,0,0,1,6.35-2.95,6.86,6.86,0,0,1,.85-.05H43.9A10.24,10.24,0,0,1,54.15,23v0q0,.25,0,.45' transform='translate(-14.55 -9.2)'/></svg>") no-repeat; //background: url("data:image/svg+xml;utf8,<svg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66.95 27.6'><defs><style>.cls-1{fill:none;stroke:#515054;stroke-linecap:round;stroke-linejoin:round;stroke-width:7.1px;}</style></defs><title>link</title><path id='Layer0_0_1_STROKES' data-name='Layer0 0 1 STROKES' class='cls-1' d='M62.4,12.75h5.35A10.16,10.16,0,0,1,77.95,23v0a11.1,11.1,0,0,1-.3,2.6,9.9,9.9,0,0,1-2.7,4.65,9.67,9.67,0,0,1-6.35,3,6.86,6.86,0,0,1-.85,0H52.15a9.88,9.88,0,0,1-7.25-3,9.9,9.9,0,0,1-2.7-4.65,11.1,11.1,0,0,1-.3-2.6v-.5M33.65,33.25H28.3a10.2,10.2,0,0,1-9.9-7.65A10.48,10.48,0,0,1,18.1,23v0a9.88,9.88,0,0,1,3-7.25,9.67,9.67,0,0,1,6.35-2.95,6.86,6.86,0,0,1,.85-.05H43.9A10.24,10.24,0,0,1,54.15,23v0q0,.25,0,.45' transform='translate(-14.55 -9.2)'/></svg>") no-repeat; display: inline-block; -webkit-font-smoothing: antialiased; line-height: 20px; text-align: center; width: 20px; height: 10px; vertical-align: middle; margin: 5px; cursor: pointer; }
I have tested this solution on IE11,FF,Chrome,Edge and Opera.
Thanks for your answer
Thanks for contributing! I'll see if I can include it in the package anytime soon.
is working on a reply...
Write your reply to:
Upload image
Image will be uploaded when post is submitted
ActionBar icons not visible on IE and FireFox
Hello,
I have identified this in the backoffice!
To resolve this problem, i have modified your css background url for your SVG icon.
I have get your css "style.css" and i have modified the SVG in the url.
I have created a sass function to transform standard svg to url encoded svg.
You can use it like:
I have tested this solution on IE11,FF,Chrome,Edge and Opera.
Thanks for your answer
Thanks for contributing! I'll see if I can include it in the package anytime soon.
is working on a reply...