字體真棒圖標沒有出現
[英]Font Awesome Icons not appearing
問題描述
我看到有幾個人描述了類似的問題，但我所看到或嘗試的都沒有解決我的問題。 我在本地存儲 Font Awesome 5 文件，但是當我嘗試添加一些圖標時，它們不會出現在瀏覽器中。 我嘗試了幾種瀏覽器，結果都是一樣的。 我懷疑錯誤在於我如何配置 CSS 文件，或者我需要向本地計算機添加另一個 FA 文件，但我無法證明這些假設中的任何一個。 下面的代碼段不起作用，因為我正在運行 xampp 並在本地存儲文件，因此我還附加了一些最大窗口和較小窗口的圖像。
較小的窗口：
最大窗口：
文件位置：
/*General Styles */ body { font-family: "Roboto", Helvetica, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.42857143; color: #333333; background-color: #f0f0f0; overflow-x: hidden; } /*Top Navbar Styles*/ #top{ background: #555555; padding: 10px 0; } #top.offer{ text-transform: uppercase; color: #ffff; } #top.offer.btn{ text-transform: uppercase; } @media (max-width: 991px) { #top.offer{ margin-bottom: 10px; } } @media (max-width: 991px){ #top{ font-size: 12px; text-align: center; } } #top a { color: #fff; } #top ul.menu{ padding-top: 5px; margin: 0; text-align: right; font-size: 12px; list-style: none; } @media (max-width: 991px){ #top ul.menu{ text-align: center; } } #top ul.menu > li{ display: inline-block; } #top ul.menu > li a{ color: #eeeeee; } #top ul.menu > li + li:before{ content: "|\\00a0"; padding: 0 5px; color: #f7f7f7; }
<!DOCTYPE html> <html> <head> <title>E Commerce Store</title> <link href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100" rel="stylesheet"> <link href="styles/bootstrap.min.css" rel="stylesheet"> <link href="styles/style.css" rel="stylesheet"> <link href="font-awesome/css/fontawesome.min.css" rel="stylesheet"> </head> <body> <div id="top"><!--top start --> <div class="container"><!-- container start --> <div class="col-md-6 offer"><!-- col md-6 offer start --> <a href="#" class="btn btn-success btn-sm">Welcome : Guest </a> <a href="#" >Shopping Cart Total Price: $100, Total Items 2 </a> </div><!-- col md-6 offer end --> <div class="col-md-6"><!-- col md-6 start --> <ul class="menu"><!-- menu start --> <li><a href="customer_register.php">Register</a></li> <li><a href="checkout.php">My Account</a></li> <li><a href="cart.php">Go to Cart</a></li> <li><a href="checkout.php">Login</a></li> </ul><!-- menu end --> </div><!-- col md-6 end --> </div><!-- container end --> </div> <!-- top end --> <div class="navbar navbar-default" id="navbar"><!-- navbar navbar-default start --> <div class="container"><!-- container start --> <div class="navbar-header"><!-- navbar-header start --> <a class="navbar-brand home" href="index.php"> <img src="images/logo.png" alt="company logo" class="hidden-xs"> <img src="images/logo-small.png" alt="company logo" class="visible-xs"> </a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation"> <span class="sr-only">Toggle Navigation</span><i class="fas fa-align-justify"></i> </button> <button type="button" class="navbar-toggle" data-toggle="navbar-toggle" data-target="#search"> <span class="sr-only">Toggle Search</span><i class="fas fa-search"></i> </button> </div><!-- navbar-header end --> <div class="navbar-collapse collapse" id="navigation"><!-- navbar-collapse collapse start --> <div class="padding-nav" ><!-- padding-nav start --> <ul class="nav navbar-nav navbar-left"><!-- nav navbar-nav navbar-left start --> <li class="active"><a href="index.php">Home</a></li> <li><a href="shop.php">Shop</a></li> <li><a href="checkout.php">My Account</a></li> <li><a href="cart.php">Shopping Cart</a></li> <li><a href="contact.php">Contact Us</a></li> </ul><!-- nav navbar-nav navbar-left start --> </div><!-- padding-nav end --> <a class="btn btn-primary navbar-btn right" href="cart.php"><i class="fas fa-shopping-cart"></i><span>4 items in cart</span></a> <div class="navbar-collapse collapse right"><!-- navbar-collapse collapse right start --> <button class="btn navbar-btn btn-primary" type="button" data-toggle="collapse" data-target="#search"><span class="sr-only">Toggle Search</span><i class="fas fa-search"></i></button> </div><!-- navbar-collapse collapse right end --> </div><!-- navbar-collapse collapse end --> </div><!-- container end --> </div><!-- navbar navbar-default end --> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
1 個解決方案
解決方案1
6 已采納 2019-06-27 16:52:55
通過 CDN 使用fontawesome.min.css ，您的任何圖標都不會呈現。 使用all.min.css他們都會這樣做。
使用"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/fontawesome.min.css"和"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/fontawesome.min.css"測試"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
字體真棒圖標沒有出現在我的頁面上
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.