如何在codeigniter中包含font-awesome

Question

我有包括字体-棒，但图标是显示方框..

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

请帮帮我

Answer 1

你不能对font-awesome.css使用base_url()或site_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;
}

字体解决方案1.如果你不想下载，你可以使用：

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

当然，这总是有效的。解决方案1的缺点是对互联网连接的依赖。

解决方案2.首先，你必须下载所有的字体文件(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;
    }

然后，将它们复制到要实现font-awesome的.html或.php文件的<style></style>中。但您必须更改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的glyphicon也是完全相似的。

Answer 2

字体不只是一个单一的css文件，它包含了更多的文件，所以如果你想在离线时做这件事，你必须把所有与字体有关的文件都放入fonts，或者使用在线链接是更好的选择

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

Answer 3

在您的服务器上托管

Click here to Download Font-Awesome

将下载的ZIP解压到Codeigniter目录中。我假设你已经在插件中解压了FontAwesome /font-awesome/

在视图中包含文件的代码：

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