如何在 codeigniter 中包含 font-awesome

Posted 2023-02-24

【中文标题】如何在 codeigniter 中包含 font-awesome

【英文标题】：How to include font-awesome in codeigniter

【发布时间】：2016-06-12 03:59:57

【问题描述】：

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

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

请帮帮我

【问题讨论】：

可以用cdn版吗？

检查文件，确保文件存在，然后检查base_url，在config.php中

cdn 工作了，但我想离线使用

这是我的基本网址 $config['base_url'] = '';

示例$config['base_url'] = 'http://localhost/your_project/'

【参考方案1】：

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

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

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

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

希望有帮助

【参考方案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 完全相似。

【讨论】：

还有 =site_url(' 可以用作 =base_url('assets/

【参考方案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/';

【参考方案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");

【参考方案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;

【参考方案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">

【讨论】：

是的。他们提取错误。正如他们所说，CDN 工作正常，但托管不工作。但在最后的评论中，他说他们的"$config['base_url'] = ''" 设置为空白；所以他在这里更新网址。

【参考方案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" />