animation sample 질문드립니다!
샘플자료에서 보면
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로 크기를 조절하려면 어떻게 해야하나요??
답변 2
0
안녕하세요! sdk0107님!
위에 올려주신 코드에서 width, height 값을 변경하셔도 되며,
아이콘의 경우 글자형태로 인식되므로 font-size를 변경하셔도 무방합니다!^^
0
안녕하세요, 인프런 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가 다른 스타일에 의해 덮어씌워지지 않았는지, 혹은 브라우저의 개발자 도구를 통해 스타일이 제대로 적용되고 있는지 확인해보시길 권장합니다.
fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다
0
36
1
댓글 기능 구현 중 질문드립니다.
0
66
1
쿠폰코드 발급
0
132
2
example 서버 플레이그라운드, API 접속 모두 안됩니다.
0
86
2
문의드립니다!! ㅠㅠ
0
101
2
graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.
0
76
2
_app.js 작성 이후로 에러가 발생하네요
0
93
2
학습자료
0
70
2
학습자료가 안열립니다.
0
49
2
플레이 그라운드 퀴즈 문제 질문이 있습니다.
0
59
0
기존강의 구매자, 업데이트 끝인가요?
0
109
3
업데이트 버전 수강
0
88
2
완벽한 프론트엔드
0
136
2
나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.
0
82
1
graphql 접속이 안됩니다.
0
100
2
const, let 사용 질문 드립니다.
0
70
2
싸이월드 만들기 1탄 피드백 부탁드립니다.
0
122
2
회원가입 과제 피드백 부탁드립니다.
0
80
2
styled.span / styled.input "CSS 자동완성"
0
47
1
쿠폰 발급 관련
0
166
2
서버 502 error
0
247
2
쿠폰 다시 부탁드려도 될가여?
0
140
2
a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요
0
184
2
2분 44초 질문
0
131
3