Css 如何转换Ionicon？

我正在尝试构建一个

bouncy arrow

指令，它可以在标记中定位和旋转

angular.module('directives').directive("bouncyArrow", function ($compile) {

    return {
        replace: true,
        restrict: 'E',
        template: '<span class="ion-arrow-right-c"></span>',
        scope: {
            heading: '='
        },
        link: function (scope, element, attrs) {

            element.css('transform', 'rotate('+attrs.heading+'deg)');
            element.css('-webkit-transform', 'rotate('+attrs.heading+'deg)');

            element.css('background-color', 'red');

        }
    };

});

---

您需要将转换应用于“ion-arrow-right-c”的：before伪类

我的建议是为元素创建一个自定义类，然后使用css进行转换。那样更干净

<bouncy-arrow heading="15"></bouncy-arrow>

angular.module('directives').directive("bouncyArrow", function () {

    return {
        replace: true,
        restrict: 'E',
        template: '<span class="ion-arrow-right-c"></span>',
        scope: {
            heading: '=',
            scale: '=',
            positionx: '=',
            positiony: '='
        },
        link: function (scope, element, attrs) {

            var transforms = [
                'translate(' + attrs.positionx+'px,'+attrs.positiony + 'px)',
                'scale(' + attrs.scale + ')',
                'rotate(-'+attrs.heading+'deg)',
            ];

            var css = {
                selector: '.bouncy-arrow:before',
                rules: [
                    'transform: '+transforms.join(' '),
                    '-webkit-transform: '+transforms.join(' ')
                ]
            };


            var sheet = css.selector + ' {' + css.rules.join(';') + '}';
            angular.element(document).find('head').prepend('<style type="text/css">' + sheet + '</style>');

            element.addClass('bouncy-arrow');
        }
    };

});