2013-07-02 36 views
5

Tôi đang phát triển một mẫu mới bằng cách sử dụng Joomla 3.0 với khung Gantry và tôi đang gặp sự cố với các biểu tượng Phông chữ tuyệt vời của tôi không hiển thị. Bây giờ, khung công tác này đã có Font Awesome đã được tích hợp sẵn trong khung công tác và tất cả những gì tôi đang làm là ghi đè CSS của mẫu với các kiểu CSS tùy chỉnh và để lại TẤT CẢ các tệp mẫu trong nguyên tắc.Phông chữ biểu tượng tuyệt vời - một số màn hình, một số không

đó đang được nói, đây là cách tôi là mã hóa các biểu tượng tạo ảnh vui nhộn Font vào trang của tôi (khá đơn giản):

<div class="container"> 
    <ul> 
    <li><a href="#"><i class="icon-twitter"></i></a></li> 
    <li><a href="#"><i class="icon-facebook"></i></a></li> 
    <li><a href="#"><i class="icon-youtube"></i></a></li> 
    <li><a href="#"><i class="icon-google-plus"></i></a></li> 
    <li><a href="#"><i class="icon-pinterest"></i></a></li> 
    </ul> 
</div> 

Đây là CSS (một lần nữa, khá đơn giản):

/* ---------- Social Media ----------*/ 

.custom_socialMedia ul{ 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    text-align: center; 
} 

.custom_socialMedia li{ 
font-size:2.5em; 
display:inline; 
} 

.custom_socialMedia .container{ 
    width:100%; 
    margin: 0 auto; 
} 

.custom_socialMedia p{ 
    font-family:'Yanone Kaffeesatz', Helvetica, Arial, sans-serif; 
font-weight: 200; 
color:#F47820; 
font-size:1.5em; 
    text-align:center; 
} 

.custom_socialMedia a { 
    color: #999; 
    text-decoration: none; 
} 

.custom_socialMedia a:hover { 
    color: #666; 
} 

.custom_socialMedia i { 
    width: 1em; 
    height: 1em; 
    cursor: pointer; 
    padding:0em 1em; 
} 

Vì đây là bài đăng đầu tiên của tôi, tôi không thể đăng hình ảnh, nhưng biểu tượng youtube không hiển thị, tuy nhiên bốn biểu tượng còn lại nằm trong Firefox, Chrome & IE, hoàn hảo như mong đợi.

Tôi hy vọng ai đó có lời giải thích về điều này.

+0

này sẽ giúp bạn: http://stackoverflow.com/a/29134488/2817112 – Oriol

Trả lời

2

Biểu tượng icon-youtube đã được giới thiệu trong phiên bản Fontawsome 3.2

Kể từ Twitter, facebook, Pinterest và google + đã được giới thiệu trong v 2.0, tôi đoán bạn phải cập nhật Fontawsome lên phiên bản 3.2

Xem thêm: http://fortawesome.github.io/Font-Awesome/icons/

+0

Fontawesome là một phiên bản cũ đối với tôi ... nhờ một phụ thuộc đá quý bất ngờ. Tôi đã làm cho nó phiên bản hiện tại và bây giờ tất cả các biểu tượng làm việc tuyệt vời. –

11

Bạn có thể gặp sự cố liên quan đến AdBlock hoặc AdBlock Plus.

Nhấp vào tiện ích mở rộng và 'Tắt tên miền/trang này' hoặc bỏ chọn 'Bật cho trang web này'.

+0

Tôi gặp sự cố này (phông chữ tuyệt vời và các ký tự xã hội không hiển thị trong Chrome). Khi tôi đưa vào danh sách trắng trang web trong Adblock Plus, các ký tự xuất hiện lại ngay lập tức. –

+3

Để làm rõ, các biểu tượng xã hội được xóa bởi "Danh sách chặn xã hội của Fanboy" bổ trợ bổ sung cho Adblock Plus (ít nhất là trong trường hợp của tôi). Việc vô hiệu hóa danh sách này (ví dụ như khi giữ lại EasyList) sẽ ngăn sự cố này trên tất cả các trang web. –

0

trong HTML, div chứa của bạn được phân loại là 'vùng chứa'.

Trong CSS, bạn xác định lớp .custom_socialMedia.

Bạn sẽ phải áp dụng lớp đó để div chứa của bạn

Các vấn đề liên quan