rallyApps에서 fontawesome 아이콘 사용

최근에 app2sdk를 사용하여 매우 좋은 효과를 얻을 때 fontawesome 글꼴에 액세스 할 수 있다는 것을 발견했습니다. 예를 들어, 여기에 내가 rallygrid에서 추세 화살표를 보여주기 위해 사용하고 있습니다 :rallyApps에서 fontawesome 아이콘 사용

enter image description here

이 지금 어떤 대안보다 훨씬 쉬웠다, 하나는 쉽게 예를 색으로 (이 아이콘 스타일을 할 수 있기 때문에) 글꼴처럼. 또한 다양한 아이콘을 사용할 준비가되어 있습니다.

하지만이 기능을 사용하는 것이 현명합니까? 이 기능은 rc2에서 작동하지만 rc1에서는 작동하지 않았으므로 어디에도 문서화되어 있지 않다고 생각합니다. SDK의 향후 릴리스에서 계속 작업 할 가능성이 있는지 아는 사람이 있습니까?

또한 모든 아이콘이 사용 가능한 것은 아닙니다.이 기능은 랠리에서 주기적으로 업데이트됩니까?

출처

2014-01-30 kimon

Entypo을 기반으로하는 랠리 아이콘이 있습니다. 이 작업이 진행 중이므로 앞으로 글꼴이 변경 될 수 있지만 Rally 자신의 집합이며 모든 Entypo 아이콘을 사용할 수있는 것은 아닙니다.

당신은 '랠리'글꼴 - 가족의 아이콘이 사용자 정의 응용 프로그램을 실행하여 AppSDK2의 특정 버전에서 사용할 수있는 프로그램 찾을 수

<!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>

출처

2014-01-30 16:52:59 nickm

사용할 수있는 아이콘 결정하는 방법이 있나요를? – kimon

사용 가능한 아이콘을 알기 위해 실행할 수있는 사용자 정의 앱 코드가있는 업데이트 된 답변을 참조하십시오. – nickm

정말 대단합니다! 그러나 나는 오늘 사용하고있는 위아래 화살표가 나타나지 않는다는 것을 알아 차립니다. 이 응용 프로그램에 포함되지 않은 다른 글꼴 그룹이 있습니까? – kimon

rallyApps에서 fontawesome 아이콘 사용

답변

관련 문제