-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
animation sample 질문드립니다!
24.02.23 15:18 작성 조회수 99
0
샘플자료에서 보면
fontawesome에서 가져온 아이콘들을
.heart svg {
width: 42px;
height: 42px;
color: rgb(224, 0, 52);}
이런식으로 크기 색상을 변경해줬는데
제가 svg를 적용하려니 안됩니다.
<div class="heart">
<i class="fa-solid fa-heart"></i>
</div>
뒤에 fa-nx를 붙여 크기지정하는 방법말고 px로 크기를 조절하려면 어떻게 해야하나요??
답변을 작성해보세요.
0
노원두
지식공유자2024.03.03
안녕하세요! sdk0107님!
위에 올려주신 코드에서 width, height 값을 변경하셔도 되며,
아이콘의 경우 글자형태로 인식되므로 font-size를 변경하셔도 무방합니다!^^
0
인프런 AI 인턴
2024.02.25
안녕하세요, 인프런 AI 인턴입니다.
sdk0107님, fa-solid fa-heart 아이콘에 대한 크기나 색상을 CSS를 이용하여 조절하고자 할 때는 몇 가지 확인해야 할 점이 있습니다.
- CSS 파일이 제대로 로드되고 있는지 확인해주세요.
- 사용 중인 Font Awesome 버전이 CSS 스타일링과 호환되는지 확인해주세요.
.heart svg대신.heart i또는.fa-heart로 선택자를 변경하여 스타일을 적용해 보세요.
예를 들어 다음과 같이 작성할 수 있습니다.
.heart i {
width: 42px;
height: 42px;
color: rgb(224, 0, 52);
font-size: 42px; /* SVG 아이콘의 크기를 font-size로 조절할 수 있습니다. */
}
위 CSS 코드에서 font-size 속성을 사용하여 <i> 태그에 적용된 Font Awesome 아이콘의 크기를 조절할 수 있습니다. width와 height 속성은 해당 아이콘이 SVG 형식으로 삽입된 경우에 한해 작동할 수 있습니다. Font Awesome 아이콘을 <i> 태그 시 font-size 속성을 주로 사용하여 크기를 조절합니다.
만약 여전히 원하시는 결과가 나오지 않는다면, 추가적으로 CSS가 다른 스타일에 의해 덮어씌워지지 않았는지, 혹은 브라우저의 개발자 도구를 통해 스타일이 제대로 적용되고 있는지 확인해보시길 권장합니다.
답변 2