CSS를 사용해 태그 박스에 PNG 아이콘 삽입하기

제품 지원
1

안녕하세요, 포럼 태그에 사용할 PNG 아이콘 세트를 적용하려고 합니다. 태그 박스에 아이콘을 넣는 법은 알아냈고, 전체 태그 박스에 적용하면 보기 좋게 표시되긴 합니다. 특정 태그를 타겟팅하는 방법도 찾았지만, 해당 특정 태그 박스를 선택해서 PNG 아이콘을 넣는 올바른 방법은 무엇일까요? 도움 주시면 감사하겠습니다!

하나만 선택하기 -

.tag-question::before {
    content: url(https://s2.coinmarketcap.com/static/img/coins/16x16/1.png);
    width: 8px;
    height: 4px;
    margin-right: 10px;
    margin-top: 3px;
    display:inline-block;
}

전체 선택 -

a.discourse-tag.box::before {
    content: url(https://s2.coinmarketcap.com/static/img/coins/16x16/1.png);
    width: 8px;
    height: 4px;
    margin-right: 10px;
    margin-top: 3px;
    display:inline-block;
}
2

왜 PNG 대신 SVG 글리프를 사용하지 않나요? Tag Icons 에 이를 위한 컴포넌트가 있습니다.

3

이미 그 방법을 시도해 봤지만, 제가 하려는 작업에서는 400개 이상의 PNG 아이콘을 SVG로 변환한 뒤, 그 모든 것을 SVG 스프라이트로 만들어야 합니다. 제가 시도해 보고 읽은 바로는, 원본 PNG의 품질을 유지하면서 이를 빠르게 또는 잘 변환하는 방법이 없다고 합니다. 몇 번의 아이콘을 몇 번 시도해 봤는데, 보통 품질이 떨어졌고, 스프라이트로 넣었을 때 테마 컴포넌트로 로드되지 않았습니다.

4

CSS 속성 선택자를 사용할 수 있습니다.

태그 질문을 사용한 예시는 다음과 같습니다:

a.discourse-tag.box[href*="question"]::before {

태그가 400개에 달한다면 일부 요소에서는 [href*= 대신 다른 방법을 사용해야 할 수 있습니다. 속성 요소를 트리거하기 위한 몇 가지 대안 방법이 있습니다.

5

아, 고마워! :grinning: 내가 하려는 작업에 정말 잘 맞을 것 같아.