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...
This forum is in read-only mode while we transition to the new forum.
You can continue this topic on the new forum by tapping the "Continue discussion" link below.
Continue discussion
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...
This forum is in read-only mode while we transition to the new forum.
You can continue this topic on the new forum by tapping the "Continue discussion" link below.