> 웹 프론트엔드 > CSS 튜토리얼 > SVG 이미지에 Font Awesome 아이콘을 어떻게 포함할 수 있나요?

SVG 이미지에 Font Awesome 아이콘을 어떻게 포함할 수 있나요?

Barbara Streisand
풀어 주다: 2024-11-23 04:42:42
원래의
548명이 탐색했습니다.

How Can I Embed Font Awesome Icons within SVG Images?

SVG 이미지에 Font Awesome 아이콘 포함

질문:

어떻게 글꼴을 통합할 수 있나요? 내 SVG 이미지에 Font Awesome 아이콘을 추가하시겠습니까? 기존 요소가 있는 요소는 결과를 생성하지 않습니다.

답변:

Font Awesome의 CSS 스타일시트를 검토하여 원하는 아이콘에 대한 특정 유니코드 문자를 결정하세요. 예:

.icon-group:before                { content: "\f0c0"; }
.icon-cloud:before                { content: "\f0c2"; }
로그인 후 복사

아이콘을 SVG에 통합하려면 원본 코드를 다음으로 바꾸세요.

<g><text x=&quot;12&quot; y=&quot;15&quot;>&amp;#xf0c2;</text></g></p>
<p>스타일시트에 다음을 추가하세요.</p>
<pre class="brush:php;toolbar:false">svg text {
   font-family: FontAwesome;
}
로그인 후 복사

Font Awesome 5 무료 버전을 사용하는 경우 다음 글꼴 모음을 사용하세요. 선언:

svg text {
   font-family: 'Font Awesome 5 Free';
}
로그인 후 복사

위 내용은 SVG 이미지에 Font Awesome 아이콘을 어떻게 포함할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿