font-awesome 가져오는 법
<!--==========FONT Awesome PRO 5==========-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" />- HTML 파일에 작성해야 합니다.
- <head></head>사이에 작성해야 합니다,
font-awsome을 쓰고 싶은 경우
#article-view li::marker {
color: #F20071;
}
ul[data-ke-list-type="disc"] > li {
list-style-type: none !important; /* 기본 불릿 제거 */
position: relative; /* 가상 요소를 위한 기준 설정 */
}
ul[data-ke-list-type="disc"] > li::before {
position: absolute;
left: -1.5em;
color: #F20071;
font-size: 12px;
font-family: 'Font Awesome 5 Pro';
content: '\f044';
}- 색상 변경 범위 : 리스트의 3종 모두 다
- 체리로 변경 범위 : 검정색 원 형태만
- 흰색 동그라미는 그대로 유지됩니다.
- 원하는 이모지는 content에다가 넣으면 됩니다.
font-awesome에 원하는 형태가 없을 경우 : 직접 이미지 넣기
준비물 : svg 파일
저는 체리 모양을 넣고 싶었는데 font-awesome에서 PRO버전에만 있어서 직접 이미지를 넣게 되었습니다.
피그마에서 iconify 플로그인을 이용해서 체리 이모지를 24px*24px 크기의 svg파일로 저장했습니다.
svg 파일 업로드
#article-view li::marker {
color: #F20071;
}
ul[data-ke-list-type="disc"] > li {
list-style-type: none !important; /* 기본 불릿 제거 */
position: relative; /* 가상 요소를 위한 기준 설정 */
}
ul[data-ke-list-type="disc"] > li::before {
position: absolute;
left: -1.3em; /* 텍스트 왼쪽에 위치 */
width: 15px; /* 불릿 크기 */
height: 15px;
margin-top: 5px;
background-image: url('images/cherry.svg'); /* 이미지 경로 삽입 */
background-size: contain; /* 이미지 크기를 컨테이너에 맞춤 */
background-repeat: no-repeat; /* 이미지 반복 방지 */
background-position: center; /* 이미지를 중앙에 위치 */
content: ''; /* 가상 요소에서 필수 */
}- 색상 변경 범위 : 리스트의 3종 모두 다
- 체리로 변경 범위 : 검정색 원 형태만
- 흰색 동그라미는 그대로 유지됩니다.
- 이미지 경로는 '파일 업로드' 칸에 있는 파일명을 그대로 복붙하면 됩니다.
728x90
'PROJECT > 티스토리 꾸미기' 카테고리의 다른 글
| [티스토리 꾸미기] 포스팅의 제목1 꾸미는 법 - 깔끔 포인트 템플릿 (0) | 2025.01.02 |
|---|---|
| [티스토리 꾸미기] 블로그홈 이름 글씨체 변경하기 (1) | 2025.01.02 |