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.

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

Please Sign in or register to post replies