네, 죄송합니다. 제 게시글을 업데이트해야 했는데 깜빡했네요. Font Awesome의 경우 Setup에 추가해야 한다는 걸 이제야 파악했습니다.
그리고 말씀하신 대로, svg 스프라이트 파일을 만들어서 icons-sprites에 업로드해야 한다는 것도 최근에 알게 되었습니다.
여전히 새로운 것들을 많이 배우고 있어요. 제 지식을 넓히는 데 도움을 주셔서 감사합니다. 감사합니다.
2개의 좋아요
우리 사이트의 카테고리 아이콘은 지금까지 잘 보였는데, 오늘 로그인한 뒤부터 문제가 생겼습니다. 아이콘과 카테고리 제목 사이의 여백이 표시될 때 사라진 것 같습니다. 다른 분들도 같은 문제를 겪고 계신가요?
예를 들어…
3개의 좋아요
저도 같은 문제를 보고 있습니다. Penar가 수정할 거라고 확신하지만, 지금은 이 코드로 해결할 수 있습니다.
.select-kit .select-kit-header .selected-name .name .d-icon {
margin-right: .25em;
}
3개의 좋아요
둘 다 감사합니다. 이제 수정되었을 것입니다.
8개의 좋아요
Font Awesome 이외의 다른 아이콘을 사용할 수 있나요? 제 포럼은 여행에 관한 것이며, Font Awesome에 없는 매우 구체적인 아이콘이 필요합니다. 예를 들어, 카테고리에서처럼 일반 PNG 아이콘 파일을 사용할 수 있을까요? 감사합니다!
3개의 좋아요
SVG로 변환하여 SVG 스프라이트를 통해 테마에 추가하면 사용자 정의 아이콘을 사용할 수 있습니다. 이 컴포넌트(그리고 Discourse 사이트 전체)에서 사용할 수 있도록 사이트에 사용자 정의 아이콘을 추가하는 방법은 이 가이드의 “Create an SVG spritesheet” 섹션을 참고하세요.
7개의 좋아요
완벽하게 작동합니다!
아이콘이 카테고리 제목 뒤에 표시되도록 수정할 수 있을까요?
보너스 질문: 툴팁/alt-text를 추가할 수 있을까요?
(배경: 자물쇠 아이콘을 숨기고, 이 컴포넌트를 사용해 공개된 몇몇 카테고리에 아이콘을 추가하고 있습니다. 사용자가 해당 심볼이 무엇을 의미하는지 알 수 있는 방법을 제공하고 싶습니다.)
1개의 좋아요
커스텀 아이콘을 사용하는 데 문제가 있습니다. 접두사를 사용해야 하는지 아닌지에 대한 안내를 받을 수 없었습니다. 제가 진행 중인 작업은 다음과 같습니다.
사용 중인 SVG는 다음과 같습니다 - https://andronixforumupload.ams3.digitaloceanspaces.com/original/1X/bdabc28a604dc98bb25ce8af2ef6f8dc7c9f2626.svg
보시는 것처럼 아치 아이콘이 전혀 보이지 않습니다.
1개의 좋아요
- SVG 스프라이트시트를 생성하세요: Replace Discourse's default SVG icons with custom icons in a theme
- 테마 컴포넌트에서 스프라이트시트를 업로드하고 변수 이름을
icons-sprite로 설정하세요:
- 컴포넌트 설정에서 스프레드시트의 원하는 아이콘 ID를 사용하세요. 예를 들어 스프레드시트에
my-icon이라는 ID의 아이콘이 있다면 이렇게 작성합니다:
결과:
6개의 좋아요
@Canapin 그 방법은 작동하지 않습니다. 제 스프라이트 파일입니다 - Sprite File
제가 시도하고 있는 이미지 ID는 - 여기
제가 하고 있는 작업은 다음과 같습니다 -
제가 무언가를 잘못하고 있는 건가요?
1개의 좋아요
스프라이트시트에서 다음을:
<svg width="0" height="0" class="hidden">
다음으로 대체해 보세요:
<svg xmlns="http://www.w3.org/2000/svg">
또한 svg icons 설정 필드에 아이콘 ID를 추가할 필요가 없습니다. 업로드한 스프라이트시트의 모든 사용자 정의 아이콘은 이미 사용 가능합니다.
svg icons 설정은 기본적으로 Discourse가 정의된 작은 세트만 로드하기 때문에, 추가적인 Font Awesome 아이콘을 로드하는 데 사용되는 것으로 생각됩니다.
5개의 좋아요
@Canapin 감사합니다! 완벽하게 작동했어요. 그런데 한 가지 더 질문이 있어요. 이 스프라이트 파일은 특정 컴포넌트에 한정된 건가요, 아니면 어디서든 id를 통해 아이콘에 접근할 수 있나요?
2개의 좋아요
사용 중인 테마나 테마 컴포넌트에 파일을 업로드하면 다른 곳에서도 사용할 수 있으므로, 아이콘 ID를 어디에서든 사용할 수 있을 것으로 보입니다.
1개의 좋아요
페나르님, 이 플러그인은 새로운 Font Awesome Pro 플러그인을 지원하나요? 아니면 제가 놓치고 있는 기존 사용 방법이 있을까요? 감사합니다!
1개의 좋아요
Pro 플러그인과 함께 작동해야 맞죠. 카테고리 아이콘에서만 비-Pro SVG가 표시되고 있나요?
2개의 좋아요
네, 스프라이트를 제거한 후에는 비프로(non-pro) 디스플레이만 표시됩니다. 또한 비프로는 라이트 아이콘 등에 대해 fa_icon_style 설정을 따르지 않습니다.
음, 제 로컬 사이트에서는 잘 작동합니다.
이것은 “Light” 스타일을 선택하여 플러그인을 사용했을 때의 톱니바퀴 아이콘입니다. 아래에 있는 일반 스타일과 비교해 보세요.
하지만 제가 제대로 확인하지 못하고 있는 건 아닌지 모르겠네요… 혹시 제대로 표시되지 않는 특정 아이콘이 있다면 알려 주세요.
4개의 좋아요
다음은 light로 설정된 예시입니다. Image Critiques는 아이콘이 comment-alt-edit인데 표시되지 않습니다(프로용 아이콘입니다). Image Showcase는 아이콘이 images로 프로용이 아니지만, light 버전이 아니라 일반 버전이 표시됩니다. Discussions는 comments의 solid 버전이 표시되고, Community는 예상대로 users의 light 버전이 표시됩니다.
그중 하나를 cog로 변경해 보았는데, 예상대로 올바른 light 버전으로 작동했습니다. 여기에는 여러 가지 이상한 현상이 일어나고 있습니다!
2개의 좋아요
far-comment-alt-edit를 시도해 보셨나요?
3개의 좋아요
아, 이제 알겠어요. 핵심은 svg icons가 아니라 category icon list에 far-를 사용하는 거였네요. 그러면 라이트 아이콘의 경우 전부 fal-로 바꿔야 하고, 사이트 설정의 fa icon style은 따르지 않는 거죠, 맞나요?
2개의 좋아요