1. 홈
  2. 질의 응답
  3. FontAwesome 5 SVG로 정사각형

FontAwesome 5 SVG로 정사각형

2017-12-09 6 views
0

배경 이미지로 멋진 5 svg 글꼴을 사용하려고합니다. 그러나, 그것은 나타나지 않고, 나는 색깔을 바꾸는 방법을 모른다.FontAwesome 5 SVG로 정사각형

이 
.no-profile-image { 
    display: block; 
    width: 100%; 
    padding-bottom: 100%; 
    background: url('/images/fa-solid.svg#user'); 
    background-size: contain; 
    background-position: center center; 
}

내가 html로 SVG 요소로 사용할 수 있습니다,하지만 위의 배경 이미지로 그랬던 것처럼 나는이 항목 광장을 할 수 없습니다 : 이것은 내가 사용하고있는 것입니다. 는 I는 시도를 다음하지만 타원형 모양의 요소 수 :

svg.no-profile-image { 
    width: 100%; 
    padding-bottom: 100%; 
} 

<svg class="no-profile-image"> 
    <use xlink:href="/images/fa-solid.svg#user" fill="white"></use> 
</svg>

어떻게 내 사업부 광장 그래서이 배경 이미지를 만들거나 사각형의 HTML SVG 요소를 만들 수 있습니다를? 글꼴 최고 5 작업을 진행하기 위해

출처

2017-12-09 Get Off My Lawn

+0

''으로 사용해 보셨습니까? 왜냐하면 아이콘으로 사용하더라도 여전히 SVG로 변환하고 단지 ''태그를 주석 처리하기 때문입니다. 라이브러리는'all.js'를하고 있습니다. –

+0

나는'i.no-profile-image'와'i.fa.fa-user' 둘 다 시도해 보았습니다. 첫 번째 것은 이미지가 없었고 두 번째 것은 html 인라인을 작성한 것처럼 보입니다. –

+0

''이렇게 해보십시오. "fas"는 "font awesome solid"를 의미합니다. –

답변

0

먼저이 같은 <head>에서 JavaScript 라이브러리를 포함해야합니다

<head> 
    <script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script> 
</head>

다음을 아이콘 (이 예에서는 사용자 아이콘)을 얻기 위하여 당신에게 다음을 입력해야합니다.

<i class="fas fa-user"></i>

fas은 "font awesome solid"를 나타냅니다.

현재 4 가지 유형의 아이콘이 있습니다. Solid, Regular, Light 및 Brands.

예를 들어 fa-lg을 입력하여 <i> 클래스 내의 아이콘 크기를 변경할 수도 있습니다. 여기에 대해 자세히 알아보기 : https://fontawesome.com/how-to-use/svg-with-js

출처

2017-12-09 15:26:00

+1

레트로가 아닌 '레귤러'라고 생각합니다. –

+1

맞아, 고쳐 주셔서 고마워요. –

관련 문제

 관련 문제