如何包括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

希望帮助