#fab-youtube이 작동하지 않습니다

지원
1

나만 그런 건지, 다른 사람들도 유튜브 아이콘이 안 보이는 거야?

#fab-youtube가 내 컴퓨터에서는 작동하지 않아

2

어디서 사용하려고 하시나요? 설정에서인가요? 테마에서인가요?

3

간이 반응형 푸터 컴포넌트에서 트위터와 페이스북 아이콘이 표시되고 있습니다?

image
image165×207 2.25 KB

4

저한테는 잘 작동해요. 설정을 한 번 더 확인해 보세요… 두 곳에 설정해 두어야 합니다. 제 설정(기본값)은 다음과 같습니다:

Screen Shot 2020-09-03 at 10.29.11 PM
Screen Shot 2020-09-03 at 10.29.11 PM679×419 45.6 KB

5

첫 번째 박스(first-box)에 로고를 추가하고 싶어서 Dax에게 조언을 구했고, 그녀는 도움을 주었습니다. 하지만 마크업을 통해 접근성(accessibility)을 보장하고 alt 텍스트를 포함해야 합니다. 그래서 HTML과 CSS를 가져와서 CSS 대신 마크업에 로고를 포함하는 푸터의 정적(static) 버전을 만들었습니다. 이제 그 입력 필드들이 더 이상 사용할 수 없습니다.

마크업은 다음과 같습니다-

image
image710×561 27.5 KB

6

페이지 내에서 아이콘을 사용할 수 있도록 하려면 백엔드에서 이를 명시적으로 지정해야 합니다. Discourse는 모든 FontAwesome 아이콘을 무조건 로드하지 않으며, 그렇게 하면 리소스 소모가 매우 커지기 때문입니다.

7

스티븐, 고마워요. 그런데 트위터와 페이스북 아이콘은 작동하나요? 그걸 어떻게 해야 하는지 조언해 줄 수 있나요? 아니면 그냥 에셋을 업로드하고 그걸로 참조하는 게 더 나은가요?

8 
<svg class="fa d-icon d-icon-fab-youtube svg-icon svg-node" id="fab-youtube" viewBox="0 0 576 512">
  <path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
</svg>

fa d-icon d-icon-fab-youtube svg-icon svg-node를 제거하려면 너비와 색상을 지정해야 합니다:

<svg id="fab-youtube" viewBox="0 0 576 512" style="width: 20px;fill: #fff;">
  <path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
</svg>
9

Facebook와 Twitter 아이콘은 이미 Discourse의 다른 곳에서 사용되고 있어 사용할 수 있습니다.

@Bcat님이 위에 게시한 내용은 YouTube SVG 아이콘의 소스입니다. 따라서 현재 사용 중인 부분을 해당 내용으로 교체하면 HTML에서 정상적으로 작동합니다.

10

Bcat, 고마워! 정말 최고야!!

11

그리고 도와주셔서 감사합니다, 크리스!