UI 그리드 기호 문제

UI 그리드 기호 문제

AngularJs ui-grid http://ui-grid.info/ 를 사용하고 있습니다.

실장중에, 드롭 다운 기호 대신에, 다음의 img 에 표시되는 것을 얻을 수 있습니다.

이 버그를 해결하기 위해 포함할 파일을 선택하십시오.

글꼴 파일을 다운로드해야 합니다.

• ui-grid.woff
• ui-grid.eot
• ui-grid.svg
• ui-grid.ttf

여기서부터요.원하는 곳으로 옮겨서ui-grid.min.css삶.

이 방법으로 ui-grid CSS 파일을 포함하십시오.

<link rel="stylesheet" href="/release/ui-grid-unstable.css">

작성자 튜토리얼 또는 API에서 스크립트 태그를 삭제합니다.

<script src="/release/ui-grid-unstable.css"></script>

예: (http://ui-grid.info/docs/#/filename/102_filename)

자동복사를 원하는 Grunt를 사용하는 사용자를 위해 이 답변(판시즈에서 훔침)을 추가하고 싶습니다.이 파일은 Gruntfile.js에 저장해야 합니다.

copy: {
      dist: {
        files: [
           ...
        //font di ui grid
         {
              expand: true,
              flatten: true,
              dest: 'dist/styles/',
              src: ['bower_components/angular-ui-grid/ui-grid.ttf',
                    'bower_components/angular-ui-grid/ui-grid.woff',
                    'bower_components/angular-ui-grid/ui-grid.eot',
                    'bower_components/angular-ui-grid/ui-grid.svg'
                    ]
            }
    ]},

또한 최근에 추가된 튜토리얼 http://ui-grid.info/docs/#/syslog/syslog_and_installation을 참조할 수도 있습니다.

여기에서는, 폰트를 올바르게 인스톨 하는 방법, 및 촬영시의 약간의 문제에 대해 설명합니다.

이 문제를 해결하는 또 다른 방법은 다음과 같이 CSS 클래스를 변경하는 것입니다.

.ui-grid-icon-down-dir:before {
  content: '\25bc';
}
.ui-grid-icon-up-dir:before {
  content: '\25b2';
}

.ui-grid-selection-row-header-buttons.ui-grid-row-selected:before{
    content:'\2714' !important;
}
.ui-grid-all-selected:before{
    content:'\2714' !important;
}

프로젝트에 포함시켜 보세요.

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css">

<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>

사용하시는 경우gulp, 이 작업을 추가합니다.

gulp.task('styles', function() {

  // Copy font files needed for angular-ui-grid
  gulp.src(['bower_components/angular-ui-grid/ui-grid.ttf',
    'bower_components/angular-ui-grid/ui-grid.woff',
    'bower_components/angular-ui-grid/ui-grid.eot',
    'bower_components/angular-ui-grid/ui-grid.svg'
  ])
    .pipe(gulp.dest('dist/styles/'))

  // Other style tasks here

});

{ expand: true, cwd: 'bower_components/sys-ui-grid', src: ['eot', '.tf', '.woff', dest: '<%= yeoman.dist %>/styles } 이 코드를 grunt 파일에 추가합니다.

사용하시는 경우ui-grid - v4.6.6, 를 넣으셔야 합니다.ui-grid.ttf그리고.ui-grid.woff폴더로fonts디렉토리 구조는 다음과 같습니다.

ui-grid.min.css
fonts  # <--  this is a folder
    ui-grid.ttf  # <-- in fonts folder
    ui-grid.woff  # <-- in fonts folder

누군가의 두통을 피하기 위해 이 답을 추가하는 것.이런 문제가 있어서 제가 찾을 수 있는 모든 단계를 다 밟았어요.다만, 파일의 장소등이 문제가 아니고, .woff 파일이 파손되어 있는 것이 문제입니다.글꼴을 로컬 머신에 다운로드하고 서버에 ftp'd를 했습니다.유감스럽게도 서버의 .woff는 불량 상태가 되어 @font-face 선언을 폭파하고 있었습니다.이 특정 문제에서는 콘솔 경고/오류가 언급되지 않지만 글꼴을 grunt/gulp/ 등에 추가하여 해결된 문제와 일치합니다.

Chrome의 오류는 기억나지 않지만 Firefox의 오류는 다음과 같습니다.

다운로드 가능한 글꼴: sanitizer에 의해 거부됨

따라서 후프를 사용했는데 아무것도 작동하지 않는 것 같으면 font 파일이 올바른지 확인하십시오.FTP에서 .woff에 장애가 발생하여 동일한 한글이 생성되었기 때문입니다.

언급URL : https://stackoverflow.com/questions/26651918/ui-grid-symbols-issue