如何在 codeigniter 中包含 font-awesome

Question

我已经包含了很棒的字体，但图标是显示方框..

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

请帮帮我

Answer 1

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

确保 URL 对应于您放置 font awesome 文件夹的位置：例如 项目
--应用
--资产
----CSS
------字体真棒
--------CSS
----------fontawesome.css
--系统

如果路径正确，那就去字体真棒网站检查你想要的图标的代码，你选择的每个图标都会有一个如何使用它的例子。

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

希望有帮助

Answer 2

您不能将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 的缺点是对 Internet 连接的依赖。

解决方案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;
    }

之后，您将它们复制到您想要实现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"); ?>" />

---

和包括glyphicon 的bootstrap 完全相似。

Answer 3

试试这个..

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

如果你不想要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 6

在您的服务器上托管

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 7

fontawesome 不仅是单个 css 文件，它在内部包含更多文件，因此如果您想离线执行此操作，您必须将所有与 fontawesome 相关的文件（如 fonts）放入或使用在线链接是更好的选择

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