Question

我包括font-awesome但是图标是显示方框..

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

请帮帮我

Answer 1

由于以下原因，您无法将base_url()或site_url()用于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;
}

解决方案1。如果您不想下载font-awesome，可以使用：

<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;
    }

之后，您将它们复制到要实现<style></style>的{{1}}或.html文件的.php。但您必须更改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"); ?>" />的{{1}}完全相似。

Answer 2

fontawesome不仅是单个css文件，它在内部包含更多文件，因此如果你想在离线状态下执行它，你必须把所有与字体相关的文件很棒，如)"></label>或使用在线链接是更好的选择

fonts

Answer 3

在您的服务器上托管

Click here to Download Font-Awesome

将下载的ZIP解压缩到您的Codeigniter目录中。我假设你已经在plugin / font-awesome /

中提取了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 4

如果您不想要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 5

没有区别，您仍然可以使用以下代码：

<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 6

试试这个..

<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 7

首先，我建议您在Chrome上按F12键检查浏览器是否有任何错误。

确保该网址与您放置字体真棒文件夹的位置相对应：例如项目
--application
--Assets
---- CSS
------字体真棒 -------- CSS
---------- fontawesome.css
--system

如果路径正确，那么请访问font awesome网站查看所需图标的代码，您选择的每个图标都会有一个如何使用它的示例。

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

希望有所帮助

如何在codeigniter中包含font-awesome

7 个答案: