Question

我最近发现在使用app2sdk时可以访问一些fontawesome字体，效果非常好。例如，我在这里使用它们来显示拉力赛中的趋势箭头：

enter image description here

这比任何替代方案都容易得多，因为你可以像字体一样轻松地设置这些图标（在本例中为颜色）。它还提供了大量有用的图标，可供使用。

但使用此功能是否明智？这个功能在rc2中工作，但是在rc1中没有工作，我不认为它在任何地方都有记录。有谁知道它是否可能继续在SDK的未来版本中工作？

此外，并非所有图标都可用 - 这是否会在Rally中定期更新？

Answer 1

我们有基于Entypo的拉力赛图标。这是一项正在进行中的工作，因此字体可能会在将来发生变化，但它是Rally自己的设置，并非所有Entypo图标都可用。

您可以通过运行此自定义应用程序以编程方式找到给定版本的AppSDK2中“Rally”字体系列的哪些图标：

<!DOCTYPE html>
<html>
<head>
    <title>FontExplorer</title>

    <script type="text/javascript" src="/apps/2.0rc2/sdk.js"></script>

    <script type="text/javascript">
        Rally.onReady(function () {
                Ext.define('CustomApp', {
    extend: 'Rally.app.App',
    componentCls: 'app',
    launch: function() {
        var fontStyles = _.find(document.styleSheets, function(styleSheet) {
            return styleSheet.href.match(/rui-fonts\.css$/);
        });
        var iconRules = _.filter(fontStyles.rules, function(rule) { 
            return rule.selectorText && rule.selectorText.match(/\.icon\-\w+\:\:before/) && rule.style[0] === 'content';  
        });

        this.add(_.map(iconRules, function(cssRule) {
            var iconName = cssRule.selectorText.substring(1).replace('::before', '');
            return {
                xtype: 'component',
                html: '<span style="font-family:courier" >' + iconName + '</span>',
                style: {
                    fontSize: '20px',
                    display: 'block'
                },
                cls: iconName,
                listeners: {
                    afterrender: function() {
                        if(this.getEl().getStyle('fontFamily') !== 'Rally') {
                            this.destroy();
                        }
                    }
                }
            };    
        }, this));
    }
});


            Rally.launchApp('CustomApp', {
                name:"FontExplorer",
           parentRepos:""
            });

        });
    </script>


    <style type="text/css">
        .app {
     /* Add app styles here */
}

    </style>
</head>
<body></body>
</html>

在拉力赛应用中使用字体真棒图标

1 个答案: