Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Raphaël Jacquiard 4 posts 105 karma points
    Oct 17, 2018 @ 08:54
    Raphaƫl Jacquiard
    0

    ActionBar icons not visible on IE and FireFox

    Hello,

    I have identified this in the backoffice!

    Chrome and FireFox screenshots

    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

  • Martijn Maris 37 posts 235 karma points MVP
    Nov 14, 2018 @ 15:22
    Martijn Maris
    100

    Thanks for contributing! I'll see if I can include it in the package anytime soon.

Please Sign in or register to post replies

Write your reply to:

Draft