Fix Lỗi Glyphicon Icon Không Hiển Thị trong Twitter Bootstrap

Twitter Bootstrap cung cấp bộ thư viện font Glyphicon miễn phí với hàng loạt các icon tiện dụng được dùng phổ biến trong thiết kế website. Thời gian dần đây có một số bạn đã câu hỏi trên CodeHub.vn yêu cầu giúp đỡ khắc phục lỗi icon không hiển thị trên web mặc dù đã sử dụng đúng cấu trúc HTML như hướng dẫn. Trong bài viết ngắn này chúng ta sẽ tìm hiểu nguyên nhân và cách khắc phục lỗi Glyphicon icon không hiển thị.

Nguyên Nhân Lỗi

Có các nguyên nhân chính tạo ra lỗi này như sau:

• Không có thư mục fonts.
• Vị trí thư mục fonts chưa đúng.
• Thư mục fonts không có hoặc không đủ các tập tin phông của Glyphicon như glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.eot...
• Thư mục fonts chứa các tập tin phông nhưng web server không có quyền truy cập thư mục hoặc đọc nội dung các tập tin (chỉ áp dụng với web server chạy trên hệ điều hành Linux).

Cách Khắc Phục

Bạn cần đảm bảo thư mục fonts tồn tại và được đặt cùng vị trí với thư mục css chứa tập tin bootstrap.css hoặc bootstrap.min.css. Một cấu trúc thư mục đúng sẽ tương tự như sau:

.
├── stylesheets
│   ├── bootstrap.min.css
│   └── style.css
├── fonts
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
└── javascripts
    └── bootstrap.min.js

Bạn có thể không cần đặt tên thư mục chứa bootstrap.min.css là stylesheets mà có thể dùng tên khác ví dụ như css tuy nhiên thư mục fonts cần được đặt ngang cấp với thư mục này như bạn thấy ở cấu trúc phía trên.

Ngoài ra bạn cũng cần đảm bảo thư mục fonts trên máy bạn có đầy đủ các tập tin phông như cấu trúc phía trên. Một số browser vẫn hiển thị Glyphicon icon ngay cả khi thư mục fons thiếu một số tập tin phông, tuy nhiên nếu bạn muốn đảm bảo icon hiển thị được cả trên các các trình duyệt cũ ví dụ như Internet Explorer 7 thì bạn cần có tất cả các tập tin phông trong tập tin fonts.

Cuối cùng nếu web server bạn đang sử dụng chạy hệ điều hành Linux thi bạn cũng cần đảm bảo thiết lập quyền truy cập thư mục fonts và quyền đọc nội dung các tập tin fonts. Bạn có thể bỏ qua phần hướng dẫn dưới đây nếu bạn sử dụng web server chạy hệ điều hành Windows.

Cách đơn giản để thực hiện điều này đó là thiết lập quyền đọc, viết và thực thi tập tin (read-write-execute) cho thư mục fonts cũng như cá tập tin bên trong nó sử dụng câu lệnh chmod:

$ sudo chmod -R 777 fonts

Ở trên tuỳ chọn -R có nghĩa là việc thiết lập quyền sẽ diễn ra đệ quy hay recursive áp dụng cho cả thư mục lẫn các tập tin, thư mục con, tập tin trong thư mục con, thư mục con của thư mục con.... Ngoài ra con số 777 sẽ thiết lập cả 3 quyền read-write-execute (hay rwx) cho user tạo thư mục, group của thư mục và toàn bộ các user khác trên hệ thống.