환영 링크 배너에서 아이콘 대신 이모지 사용

개발
1

질문: 배너 색상이 기본적으로 테마 색상을 따르나요? 예를 들어 포럼이 다크 모드일 때처럼요?

또한, 기능 요청 두 가지가 있습니다:

  • 가운데 정렬 대신 왼쪽 정렬로 변경할 수 있으면 좋겠습니다(물론 CSS로 간단하게 할 수 있을 것 같지만요).
  • Font Awesome 아이콘 대신 이모지를 사용할 수 있으면 좋겠습니다.
2

제 경험상 그렇습니다. 제 스크린샷을 여기서 확인해 보세요: Third migration, once again for a niche forum (Volkswagen Campers vans)

조금 해킹적인 방식이지만… CSS만으로 가능합니다:

.featured-todo div {
    h3 {
        background: no-repeat top center;
        background-size: 30px 30px; // 이모지 너비와 높이
        padding-top: 45px; // 이모지 높이 + 아래 여백 15px
        svg {
            display: none !important;
        }
    }
    &:first-child h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/rocket.png");
    }
    &:nth-child(2) h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/grin.png");
    }
    &:last-child h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/+1.png");
    }
}

image
image1088×300 21.5 KB

어떤 부분을 말씀하시는 건가요?

3

도와주셔서 감사합니다 @Canapin

세 개의 링크와 그 아이콘에 대해 말씀드리는 것입니다. 데스크톱과 모바일 모두에서 텍스트와 아이콘이 가운데 정렬이 아닌 왼쪽 정렬되기를 바랍니다. 저는 CSS/HTML에 대한 기초적인 지식만 있어서 개발자 도구를 이용해 어떻게 변경해야 하는지 알지 못했습니다.

4

아이콘 사용:

.featured-todo div h3 {
    display: flex;
    align-items: center;
    svg {
        margin: 0 10px 0 0 !important;
    }
}

image
image1304×356 21.1 KB

이모지 사용:

.featured-todo div {
    h3 {        
        display: flex;
        align-items: center;
        background: no-repeat left center;
        background-size: 30px 30px; // 이모지 너비와 높이
        padding-left: 45px; // 이모지 너비 + 왼쪽 여백 15px
        svg {
            display: none !important;
        }
    }
    &:first-child h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/rocket.png");
    }
    &:nth-child(2) h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/grin.png");
    }
    &:last-child h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/+1.png");
    }
}

image
image1293×368 24.6 KB

참고: 모바일에서 이러한 커스터마이징을 테스트하지 않았습니다.