Helpex - Trao đổi & giúp đỡ Đăng nhập

Làm cách nào để ngăn văn bản biểu tượng tài liệu hiển thị khi JS của Google không chuyển đổi được chúng?

Đặng Ðức Tuấn
· 03:21 18/01/2017
5 ngày trước

Làm cách nào để ngăn văn bản biểu tượng tài liệu hiển thị khi JS của Google không chuyển đổi chúng thành biểu tượng?

Các biểu tượng được định nghĩa trong đánh dấu như sau:

<span class="material-icons">icon_name</span>

Ví dụ: https://archive.fo/CKqKG/scr.png (xem hàng nút trên cùng).

Tài liệu về Biểu tượng Vật liệu: https://material.io/icons/

Đây cũng là một vấn đề trong tìm kiếm của Google, nơi Google sẽ thực sự đọc và lưu văn bản của div thay vì bỏ qua nó.

Ví dụ: https://i.imgur.com/TixS06y.png

Tôi hiểu rằng một giải pháp đơn giản là chuyển sang .PNGs (do Google cung cấp). Tôi muốn làm bất cứ điều gì dẫn đến tải (mạng) ít hơn trên hệ thống của người dùng.

Cảm ơn!

31 hữu ích 1 bình luận 14k xem chia sẻ
Ngô Thế Dũng
· 13:45 14/11/2018
13:45:00 14/11/2018

bạn có thể sử dụng font-display: block;, chỉ cần thêm CSS này vào HTML head của bạn:

<style>
   @font-face {
      font-family: 'Material Icons';
      font-display: block;
    }
</style>

để biết thêm thông tin phông chữ-hiển thị

13 hữu ích 4 bình luận chia sẻ
Lý Chi Bảo
· 21:49 30/01/2019
21:49:49 30/01/2019

Tôi đã đấu tranh với tình trạng tương tự: vấn đề của tôi là không phải là các biểu tượng không bao giờ nạp, chỉ cần họ có thể mất một thời gian để tải trên các kết nối chậm hơn và cho đến khi họ nạp xấu xí, văn bản chưa định dạng như sentiment_very_satisfied sẽ được hiển thị trên trang (thường lớn hơn nhiều lần so với văn bản xung quanh cũng như làm cho nó rất rõ ràng).

Các giải pháp khác ở đây không phù hợp với tôi (bao gồm cả giải pháp font-display:blockmà tôi nghĩ có thể hứa hẹn), vì vậy tôi đã nghĩ ra cách sử dụng CSS và jQuery của riêng mình. Tôi chắc rằng bạn có thể dễ dàng điều chỉnh nó để sử dụng vanilla JS.

CSS:

.material-icons{
    opacity:0;
}

jQuery:

$(window).load(function() {
    $('.material-icons').css('opacity','1');
});

Bí quyết ở đây là, không giống như trình $(document).ready()lắng nghe được sử dụng phổ biến hơn , $(window).load()đợi tất cả các phần tử của một trang được tải xuống trước khi được kích hoạt. Trong trường hợp này, điều đó có nghĩa là nó sẽ không thay đổi độ mờ của các biểu tượng cho đến khi phông chữ biểu tượng được tải xuống.

Nhược điểm là các biểu tượng sẽ không hiển thị cho đến khi mọi thứ trên trang được tải xuống, nhưng đó là một sự đánh đổi mà tôi sẵn sàng thực hiện để tránh có những khoảng văn bản khổng lồ hiển thị trên trang của tôi trước khi phông chữ biểu tượng được tải.

(Tôi cũng đã thêm một quá trình chuyển đổi vào CSS .material-icons{transition:opacity 0.5s;}để chúng hiển thị đẹp và mượt mà.)

5 hữu ích 1 bình luận chia sẻ
Huỳnh Bảo Thư
· 20:15 04/11/2017
20:15:06 04/11/2017

Nếu bạn đang sử dụng trình tải webfont của Typekit , bạn có thể áp dụng các lớp có điều kiện để ẩn các biểu tượng trong khi phông chữ web đang tải hoặc nếu phông chữ web không tải được, ví dụ:

.wf-loading, .wf-materialicons-n4-inactive {
  .material-icons {
    display: none;
  }
}

Tất nhiên, bạn có thể áp dụng các kỹ thuật tạo kiểu khác theo sở thích của mình để có kết quả tốt nhất, ví dụ: font-size: 0;nó sẽ phụ thuộc vào trang web và trường hợp sử dụng của bạn.

Để tải các biểu tượng material với trình tải webfont, hãy sử dụng cấu hình như sau:

window.WebFontConfig = {
  google: {
    families: [
      'Material Icons',
    ],
  },
};
4 hữu ích 2 bình luận chia sẻ
Võ Ngọc Hằng
· 21:19 29/08/2017
21:19:08 29/08/2017

Tôi đang đối mặt với vấn đề tương tự. Tuy nhiên, tôi tin rằng việc sử dụng công cụ chọn giả như i.material-icon: before có thể hữu ích. Xem cái này để biết thêm thông tin.

---- CHỈNH SỬA: Ví dụ làm việc

i.material-icons:before{display:none;}

3 hữu ích 0 bình luận chia sẻ
Phan Minh Xuân
· 06:27 02/07/2019
06:27:19 02/07/2019

Trong trường hợp nếu bạn đang sử dụng anglejs, cách khắc phục có thể là

<i class="material-icons-outlined" ng-bind-html=" 'icon_text' "></i>

hoặc nếu bạn đang sử dụng jquery, thì

HTML

<i material-icons="icon_text" class="material-icons"></i>

jQuery.onLoad

$('[material-icons]').each(function(){
  var icon_text = $(this).attr('material-icons');
  $(this).html(icon_text)
});

Biểu tượng xuất hiện sau khi trang được tải.

3 hữu ích 1 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ javascript css icons google-material-icons , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm