Tutorial 2x [cXF] Icons for Login and Register buttons - Biểu tượng nút Đăng nhập và Đăng ký cho XenForo 2

[PVS]

[cXF] Icons for Login and Register buttons - Biểu tượng nút Đăng nhập và Đăng ký cho XenForo 2


Bài viết này sẽ hướng dẫn các bạn cách thêm biểu tượng vào phía trước 2 nút Đăng nhập và Đăng ký.

​

Đối với XenForo 2.3, hãy thêm code bên dưới vào template extra.less của bạn:

/* Icons for Login and Register buttons */
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--logIn:before,
.p-offCanvasRegisterLink [href*="login"]:before {
    .m-faContent(@fa-var-sign-in);
    color: #E6BB5C;
}
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--register:before,
.p-offCanvasRegisterLink [href*="register"]:before {
    .m-faContent(@fa-var-key);
    color: #E6BB5C;
}
/**********/

Nếu bạn muốn một biểu tượng có một trong các kiểu Font Awesome 5 Pro - nhạt, đồng nhất hoặc hai tông màu - hãy sử dụng code ở trên như sau (ví dụ): .m-faContent(@fa-var-duotone-sign-in);. Như bạn thấy, bạn thêm tên kiểu (trong trường hợp này là hai tông màu) vào bên trong code ngay sau var-.

---

Đối với XenForo 2.2, hãy thêm code bên dưới vào template extra.less của bạn:

/* Icons for Login and Register buttons */
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--logIn:before,
.p-offCanvasRegisterLink [href*="login"]:before {
    .m-faBase();
    .m-faContent(@fa-var-sign-in, 1em);
    color: #E6BB5C;
}
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--register:before,
.p-offCanvasRegisterLink [href*="register"]:before {
    .m-faBase();
    .m-faContent(@fa-var-key, 1em);
    color: #E6BB5C;
}
/**********/

Hoặc nếu bạn muốn biểu tượng Pro có kiểu dáng cụ thể thì hãy thay đổi .m-faBase(); như thế này:

.m-faBase('Pro', @faWeight-solid);

Nếu bạn chỉ muốn hiển thị các biểu tượng cho chế độ xem trên thiết bị di động (không có văn bản Đăng nhập và Đăng ký), hãy thêm code này vào template extra.less của bạn:

@media (max-width: @xf-responsiveMedium) {
    .p-navgroup-link--logIn, .p-navgroup-link--register {
        .p-navgroup-linkText {
            display: none;
        }
    }
}

Chúc các bạn thành công.

Nguồn: xenforo.com​