标签: font-awesome

我有一个包含图像的svg:

<g><image id="myImage" class="myClass" x="12" y="15" width="10" height="10" xlink:href="/images/pic.png"/></g>

如何用字体真棒图标替换该行:

<g><i class="icon icon-cloud-download" x="12" y="15" width="10" height="10"></i></g>

似乎不起作用,因为图像没有显示.

我不知道发生了什么但是在浏览器控制台中我可以看到3个与font-awesome相关的错误

 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff2?v=4.3.0 
 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff?v=4.3.0
 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.ttf?v=4.3.0 

我知道这是荒谬的,我不能自己弄清楚这一点,但一切似乎都没问题,在我的index.html我有这样的事情

<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />

这就是我所有与字体有关的东西,我已经检查了路径,我没有错.

你们中的任何人都会这样吗？

UPDATE

这是NGINX部分,我在标题中加载了一些内容

add_header Content-Security-Policy "style-src 'self' 'unsafe-inline'
https://fonts.googleapis.com
https://fonts.gstatic.com
https://themes.googleusercontent.com
https://assets.zendesk.com;
font-src 'self' https://themes.googleusercontent.com
https://fonts.gstatic.com;";

我正在使用字体库字体真棒.当项目没有使用grunt构建/使用时,它可以工作.

但是,当我用咕噜声构建项目时,它无法正常工作.我在控制台中收到此错误:.../fonts/fontawesome-webfont.woff？v = 4.0.3 404(未找到)

我和自耕农一起搭建了这个项目.

这是我在index.html中的参考

    <!-- build:css styles/fontawesome.css -->
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <!-- endbuild -->

什么想法可能是错的？

更新 我需要将文件夹/ bower_components/font-awesome/fonts复制到dist/fonts.这需要在grunt文件中完成.可能在"复制"选项下

copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>',
      src: [
        '*.{ico,png,txt}',
        '.htaccess',
        'bower_components/**/*',
        'images/{,*/}*.{gif,webp}',
        'styles/fonts/*'
      ]
    }, {
      expand: true,
      cwd: '.tmp/images',
      dest: '<%= yeoman.dist %>/images',
      src: [
        'generated/*'
      ]
    }]
  },

但我不确定在哪里包括这个.

我正在使用此HTML代码:

<div class="col-lg-4">
  <div class="panel">
    <div class="panel-heading">
      <div class="row">
        <div class="col-xs-3">
          <i class="fa fa-cogs fa-5x"></i>
        </div>
        <div class="col-xs-9 text-right">
          <div class="huge">
            <?=db_query("SELECT COUNT(*) FROM orders WHERE customer = '" . $_SESSION['customer'] . "' AND EntryDate BETWEEN '" . date('d-M-y', strtotime('Monday this week')) . "' AND '" . date('d-M-y', strtotime('Friday this week')) . "'");?>
          </div>
            <div>orders this week</div>
        </div>
      </div>
    </div>
    <a href="view/orders">
      <div class="panel-footer">
        <span class="pull-left">View Details</span>
          <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
            <div class="clearfix"></div>
      </div>
    </a>
  </div>
</div>

这创造了:

是否可以使图标大于fa-5x …

我的网页设计师为我提供了已添加到字体真棒的更新字体/图标 - 他将其放在本地字体文件夹中.我还获得了一个font-awesome.css文件.

我直接将fonts文件夹复制到我的资产中,并将font-awesome.css放在assets/stylesheets中.

我的代码中正确引用了css,但是没有加载字体文件夹中的任何图标.

我需要做些什么才能确保所有内容都正确加载和/或引用了fonts文件夹？

我有一个带有Font Awesome图标的表格,我想对齐文本左侧和中央图标.我尝试了居中<i>但不起作用:

HTML:

<td><i class="icon-ok"></i></td>

CSS:

td, th {
    text-align: left;
}
td i {
    text-align:center;
}

的jsfiddle

我也试着设置text-align:center !important;但不起作用.我做错了什么？

我想在Font Awesome符号(fa-envelope)的顶部添加带有一些数字(5,10,100)的徽章.例如:

但是,我无法理解如何将徽章放在符号的顶部.我的尝试可以在这里找到:jsFiddle.

我想支持Twitter Bootstrap 2.3.2.

我无法在Bootstrap框架下的按钮内垂直对齐字体 - 真棒图标和文本.我尝试了很多东西,包括设置行高,但没有任何工作.

<button id="edit-listing-form-house_Continue" 
        class="btn btn-large btn-primary"
        style=""
        value=""
        name="Continue"
        type="submit">
    Continue
    <i class="icon-ok" style="font-size:40px;"></i>
</button>

http://jsfiddle.net/fPXFY/

我怎样才能让它发挥作用？

我有一个非常基本的HTML混合纯文本和图标字体:

<div class="ui menu">
    <a href="t" class="item"><i class="large home basic icon"></i><span class="nav-text"> Accueil</span></a>
    <a href="" class="item"><i class="large camera retro icon"></i><span class="nav-text"> Créations</span></a>
    <a class="item"><span class="nav-text">Qui-suis je </span><i class="large help basic icon"></i></a>
</div>

问题是图标没有完全呈现在与文本相同的高度:

有什么建议可以解决吗？

我在我的项目中使用字体很棒(mvc/asp.net).我的问题是,我正在调试项目并检查localhost,字体真棒图标没有问题.但是当发布网站并在网上查看时,我看到了小盒子,而不是图标.我确定它放在正确的目录中(放置css文件的位置).

我找不到任何合适的解决方案.

顺便说一下按钮也没问题.它们都还可以,但图标消失了.

谢谢