Radu
(Radu)
1
스크린샷의 텍스트를 CSS만으로 다른 어떤 SVG 아이콘으로든 교체하는 방법이 있을까요?
도움 주시면 감사하겠습니다! 
먼저 업로드 섹션에 SVG 파일을 업로드해야 합니다. SCSS 변수 이름은 짧고 간결하게 지어 주세요.
그 다음, Common 탭에 다음 코드를 추가하세요:
th.posts.sortable.num.topic-list-data {
content: url($name-of-variable);
}
url 괄호 안에 따옴표를 넣지 않도록 주의하세요.
Canapin
(Coin-coin le Canapin)
3
Don은 CSS에서 아이콘을 사용하기 위한 헬퍼 도구를 만들었습니다:
Radu
(Radu)
4
미안하지만 잘 이해가 안 돼. $name-of-variable이 뭐라는 거야? content: 뒤에 SVG 코드를 추가하려고 하는데, 작동이 안 돼. 
Radu
(Radu)
5
@Canapin 님, 정말 감사드립니다. 하지만 "replies"라는 단어를 SVG 코드로 바꾸기 위해 추가 컴포넌트를 설치하는 일은 원치 않습니다. 
변수 이름은 SVG 파일을 업로드할 때 입력한 이름입니다.
이 작업을 수행하려면 관리자 권한이 필요합니다.
- 포럼에서
/admin으로 이동합니다.
- 사이드바에서 커스터마이징 섹션의 Components를 선택하고 새 컴포넌트를 만듭니다.
- 컴포넌트 페이지 하단의 Uploads에서 SVG 파일을 업로드합니다.
- 변수 이름을 선택합니다(업로드 파일 모달에서).
- 제 게시물에 있는 코드를 사용합니다:
name-of-variable을 4단계에서 선택한 이름으로 대체합니다. 변수 이름 앞의 $는 그대로 유지하세요.
- 이제 준비 완료입니다!
Radu
(Radu)
7
정말 감사합니다. 이제 아주 명확해졌습니다.
간단한 질문 하나만 드릴게요: 예를 들어 아이콘이 10개 있다고 가정할 때, 아이콘을 하나씩 업로드해야 하나요?
@Radu 제 가이드가 작동하지 않는 경우, 여러 아이콘에 대해 파일 1개만 업로드하면 되는 것으로 보이는 다음 가이드를 따를 수 있습니다:
Radu
(Radu)
10
정말 유익한 글이었습니다. 기본 아이콘을 교체하는 데 큰 도움이 되었습니다. 혹시 한 가지 여쭤봐도 될까요…
아래 코드에서 content 안에 FontAwesome 아이콘을 어떻게 넣을 수 있을까요?
th.topic-list-data.posts.num > span {
visibility: hidden;
}
th.topic-list-data.posts.num > span:after {
content:'a FontAwesome Icon here';
visibility: visible;
display: inline-block;
padding-bottom: 1.2em;
}
SVG로 다운로드한 뒤 같은 작업을 수행할 수 있습니다. 그렇지 않으면 컴포넌트를 만들어야 하며, 이 경우 더 복잡해집니다.
Radu
(Radu)
12
그러면 이런 방식으로 할 수 있는 방법이 없나요?
content:'fa d-icon d-icon-reply';
만약 불가능하다면, 다음 메서드에 대한 코드는 어떻게 작성해야 할까요? 시작할 수 있는 예제만 필요해요. 기본 CSS를 시도해 봤는데 효과가 없거든요.
도와주시면 감사하겠습니다!
아니요, 하지만 이전 메서드에서 사용했던 동일한 방법을 사용할 수 있습니다. 업로드한 후, 가이드를 따라 SVG 파일로 추가하십시오;
아이콘을 어디에 배치하고 싶은지 정확히 파악이 잘 안 됩니다. 스크린샷을 보내 주실 수 있을까요?
감사합니다.
Radu
(Radu)
15
어디에 위치하든 상관없어요. 저는 단순히 content:'...' 줄 안에 FA 아이콘을 넣고 싶습니다.
FA를 폰트 패밀리로 사용하고 content 메서드 안에 유니코드를 넣는 방식으로 진행할 것 같아요.
다음과 같이 처리할 수 있습니다:
이것이 동작하는지 100% 확신은 없지만, 대부분 동작할 것이라고 꽤 확신합니다.