如何包括fontawesome在笨

Question

我有包括fontawesome但圖標是顯示的方盒子..

<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/font-awesome.css') ?>"> 

請幫我

Answer 1

fontawesome不僅是單一的css文件它包含多個文件在內部，所以如果你想這樣做離線，你必須把到字體真棒相關的所有文件中像fonts或使用網上鍊接是更好的選擇

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> 

Answer 2

何你的服務器

Click here to Download Font-Awesome

上刺解壓下載的zip到你笨目錄。我假設你已經提取FontAwesome在插件/字體真棒/

代碼，以查看文件：

<link rel="stylesheet" type="text/css" href="<?php echo base_url('plugin/font-awesome/css/font-awesome.min.css'); ?>"> 

使用CDN託管

只需將此代碼添加到您的視圖

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 

Answer 3

如果你不想cdn，那麼你可以做到這一點。

打開css文件（在fontawesome/css中）並更改所有字體文件的url源。

此塊

@font-face { 


font-family: 'FontAwesome'; 
    src: url('../fonts/fontawesome-webfont.eot?v=4.6.3'); 
    src: url('../font-awesome-4.6.3/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../font-awesome-4.6.3/fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

到

@font-face { 
    font-family: 'FontAwesome'; 
    src: url('domainName/fonts/fontawesome-webfont.eot?v=4.6.3'); 
    src: url('domainName/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('domainName/fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('domainName/fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('domainName/fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('http://localhost/khloe/assets/font-awesome-4.6.3/fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Answer 4

沒有差別，你仍然可以使用下面的代碼：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> 

您還可以通過包括它通過添加CSS文件：

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"); 

Answer 5

試試這個..

<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/font-awesome.css"> 

，並設置您BASE_URL在你的配置文件中像這樣

$config['base_url'] = 'http://domain.com/websiteroot/'; 

Answer 6

不能使用base_url()或site_url()的字體awesome.css不僅是因爲：

@font-face { 
font-family: 'FontAwesome'; 
    src: url('../fonts/fontawesome-webfont.eot?v=4.6.3'); 
    src: url('../font-awesome-4.6.3/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../font-awesome-4.6.3/fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Soluti 1.如果你不想下載字體真棒，你可以使用：

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

當然，這始終有效。解決方案1的缺點是對互聯網連接的依賴。

解決方案2.首先，您必須下載的所有文件fontawesome（SVG，WOFF，EOT，...），並把它們放在一個文件夾中 - 例如，讓文件夾的名稱是fontawesome 。

然後，你必須從文件中刪除下面的代碼font-awesome.css

@font-face { 
    font-family: 'FontAwesome'; 
     src: url('../fonts/fontawesome-webfont.eot?v=4.6.3'); 
     src: url('../font-awesome-4.6.3/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../font-awesome-4.6.3/fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg'); 
     font-weight: normal; 
     font-style: normal; 
    } 

之後，您將它們複製到.html或.php文件的<style></style>，要實現font-awesome。但是，你必須改變src如下：

@font-face { 
    font-family: 'FontAwesome'; 
     src: url('<?=site_url('fontawesome/fontawesome-webfont.eot?v=4.6.3'); ?>'); 
     src: url('<?=site_url('fontawesome/fontawesome-webfont.eot?#iefix&v=4.6.3') ; ?>') format('embedded-opentype'), url('<?=site_url('fontawesome/fontawesome-webfont.woff2?v=4.6.3');?>') format('woff2'), url('<?=site_url('fontawesome-webfont.woff?v=4.6.3'); ?>') format('woff'), url('<?=site_url('fontawesome/fontawesome-webfont.ttf?v=4.6.3'); ?>') format('truetype'), url('<?=site_url('fontawesome/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular'); ?>') format('svg'); 
     font-weight: normal; 
     font-style: normal; 
    } 

，記得在你的.html，.php添加這些太：

<link rel="stylesheet" type="text/css" href="<?=site_url("fontawesome/font-awesome.css"); ?>" />

---

而且包括bootstrap​​是完全相似。

Answer 7

首先，我會建議您檢查您的瀏覽器，如果在Chrome上按F12有任何錯誤。

確保URL對應於你已經把你的字體文件夾真棒的地方：例如 項目
--application
--Assets
---- CSS
------字體真棒
-------- CSS
-------- --fontawesome.css
--system

如果路徑是正確的，那麼去字體真棒網站，檢查你想要的圖標的代碼，每次選擇圖標就會對如何使用它的一個例子。

https://fontawesome.com/icons?d=gallery

希望幫助