반응형
SVG에 멋진 글꼴 아이콘을 어떻게 포함합니까?
이미지가 포함 된 svg가 있습니다.
<g><image id="myImage" class="myClass" x="12" y="15" width="10" height="10" xlink:href="/images/pic.png"/></g>
글꼴 멋진 아이콘으로 해당 줄을 어떻게 대체합니까?
<g><i class="icon icon-cloud-download" x="12" y="15" width="10" height="10"></i></g>
이미지가 표시되지 않아 작동하지 않는 것 같습니다.
i유효한 SVG가 아닙니다. 아이콘을 표시하는 실제 문자를 포함해야합니다. 당신이 한 번 봐 걸릴 경우 글꼴 멋진의를 스타일 시트 당신이 볼 것입니다 ...
.icon-group:before { content: "\f0c0"; }
.icon-link:before { content: "\f0c1"; }
.icon-cloud:before { content: "\f0c2"; }
.icon-beaker:before { content: "\f0c3"; }
.icon-cut:before { content: "\f0c4"; }
.icon-copy:before { content: "\f0c5"; }
.icon-paper-clip:before { content: "\f0c6"; }
.icon-save:before { content: "\f0c7"; }
.icon-sign-blank:before { content: "\f0c8"; }
.icon-reorder:before { content: "\f0c9"; }
.icon-list-ul:before { content: "\f0ca"; }
.icon-list-ol:before { content: "\f0cb"; }
.icon-strikethrough:before { content: "\f0cc"; }
.icon-underline:before { content: "\f0cd"; }
.icon-table:before { content: "\f0ce"; }
그러나 이들은 CSS 용으로 인코딩 된 유니 코드 문자입니다. SVG에서 예제의 구문을 다음과 같이 변경해야 \f040합니다.
<g><text x="0" y="0"></text></g>
그런 다음 스타일 시트에 다음을 추가합니다.
svg text {
font-family: FontAwesome;
}
내 데모
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div title="Code: 0xe800" class="the-icons span3">
<H3>Standard using:</H3>
<i class="fa fa-camera-retro fa-4x"></i>
<br>
<H3>SVG using:</H3>
</body>
</html>
JS
var svg = d3.select("body")
.append("svg")
.attr("width", 250)
.attr("height", 250);
svg.append("text")
.attr("x",0)
.attr("y",70)
.attr("font-family","FontAwesome")
.attr('font-size', function(d) { return '70px';} )
.text(function(d) { return '\uf083'; });
참고 URL : https://stackoverflow.com/questions/14984007/how-do-i-include-a-font-awesome-icon-in-my-svg
반응형
'UFO ET IT' 카테고리의 다른 글
| 스칼라-제네릭의 모든 대 밑줄 (0) | 2020.11.11 |
|---|---|
| 열이 목록 인 data.frame 만들기 (0) | 2020.11.10 |
| 차이점 (0) | 2020.11.10 |
| 2 ^ 32 이상의 열거 형 플래그 (0) | 2020.11.10 |
| Moment.js 날짜를 사용자 현지 시간대로 변환하는 방법은 무엇입니까? (0) | 2020.11.10 |