关于font awesome 的问题。且听我讲讲过程。。。我一开始在网站里用i标签

Posted 2023-03-31

关于font awesome 的问题。且听我讲讲过程。。。我一开始在网站里用i标签调用了fa的图标，可是没显示。后来知道是要添加fa的css和字体文件那些的。我去fa官网把要用的都下下来传到网站了，添加了/font-awesome.css和font-awesome.min.css这两个样式表，然后图标可以正常显示了。昨天朋友突然告诉我所有的图标都不显示，我试了一下后发现只有UC和安卓自带的浏览器可以显示出来，其他的浏览器诸如Q浏，360都不行。求解？

FontAwesome为TwitterBootstrap提供了一种独一无二的图像字体.它还提供了CSS的很强的扩展性.CSS提供了一种描述html的机制，可以让你自由的设计网页。你能给FontAwesome加上各种各样的参数来满足你的需求，比如说改变字体，字体大小，图标颜色，阴影等等。FontAwesome诱人的特性FontAwesome只为Boostrap设计，BootStrap是一个前端开发的工具，可以帮助我们在线开发响应式和移动项目。即使你拥有不同的网页设计技能，你也能快速使用FontAwesome设计出富有创造性的图标.即使用单一的字体，你也可以创建369不同风格的图标，这一点很像象形语言.FontAwesome现在的版本是4.0.0.兼容性问题不是问题，因为它不依赖javascript.定制过程的过程只涉及以直观的方式使用CSS。其可扩展矢量允许你更改图标的大小，以适应任何设计，让你的标志性设计看起来更加吸引人。FontAwesome能很容易的转换为PNG文件.这种文件格式支持无损数据压缩，它使用的PNG文件扩展名或为多用途Internet邮件扩展（MIME）的图像/png格式的媒体类型.使用PNG以全彩色非调色为基础，并支持灰度图像。PNG是一个被广泛使用的网页设计师最常用的无损图像压缩格式。因为在CSS中iconicfont可以使用，你需要将FontAwesome按一下步骤转换为PNG文件:方法一:Step1.从FontAwesomewebsite.下载FontAwesome程序。Step2.从Github上下载theFontAwesomeTTFFile.Step3.保存FontAwesome使用文档。 参考技术A 我也遇到了这样的问题。。。请问题主解决了吗？

如何为 Font Awesome 图标赋予背景颜色？

【中文标题】如何为 Font Awesome 图标赋予背景颜色？

【英文标题】：How do I give a Font Awesome icon a background color?

【发布时间】：2015-01-31 14:36:25

【问题描述】：

在此页面的页脚http://128.199.58.229/landingpage/

我有一些 Font Awesome 图标（社交媒体图标）。

我试图在图标本身后面给它们一个白色背景。白色背景当前突出。我已经阅读了一些关于使用宽度、高度和边框半径的组合来实现这一点的帖子，但目前没有成功。

.lt-bus-info .fa 
background-color: white;
border-radius: 50%;

这是一个 jsfiddle：http://jsfiddle.net/magician11/nfz9sucn/1/

我正在寻找符号后面的白色：https://dl.dropboxusercontent.com/u/14057353/Screen%20Shot%202014-12-03%20at%204.01.18%20pm.png

有人知道如何解决这个问题吗？ 谢谢。

【问题讨论】：

查看这个答案***.com/a/63357356/9031516

【参考方案1】：

     background-image: linear-gradient( to bottom, transparent 20%, white 20%, white 93%, transparent 93% );
    background-size: 84%;
    background-position: 60% 0;
    background-repeat: no-repeat;

See examples

【参考方案2】：

最简单的方法可能是为列表项设置背景色

li 
background-color: white;

【参考方案3】：

这是一个非常酷的方法，这里没有提到，在几行代码中你就是 gtg。

i.fa-smile-o 
position: relative;
color: #555;


i.fa-smile-o:before 
    content: "\f111";
    color: #f1c40f;


i.fa-smile-o:after 
    left: 0;
    top: 0;
    position: absolute;
    content: "\f118";

这样你也可以用here可以找到的meh或皱眉代码填充内容，享受！

【参考方案4】：

我很惊讶还没有人提到这种方法：

html

          <div class="social-media text-right">
            <a href="" class="facebook">
              <span class="fa fa-facebook"></span>
            </a>
          </div>

css

.social-media a

    display: inline-block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    margin-right: 10px;
    border-radius: 34px;

    .social-media a.facebook
    
        background: #3b5998;
    

【讨论】：

好点。但是，当我增加字体大小时，背景不会覆盖整个图标。 codepen.io/magician11/pen/Vewgqp

有点不同的问题，但我添加了额外的 css 作为大小的示例。尝试使用宽度、行高和边框半径

【参考方案5】：

我正在寻找解决方案，但没有找到代码更少的完美解决方案，所以我花了很少的时间为您制作了这个fiddle。

HTML

<div class="background">
<i class="fa fa-facebook-square fb-btn"></i>
<i class="fa fa-twitter-square twt-btn"></i>
<i class="fa fa-google-plus-square gp-btn"></i>
</div>

CSS

.fb-btn
    background-color: #fff;
    border-radius: 50% 8px 10px 50%;
    color: #305891;
    font-size: 40px;
    height: 32px;
    line-height: 30px;width: 32px;
    margin: 5px;


.twt-btn
    background-color: #fff;
    border-radius: 50%;
    color: #2ca8d2;
    font-size: 40px;
    height: 30px;
    line-height: 30px;
    margin: 5px;
    width: 30px;


.gp-btn
    background-color: #fff;
    border-radius: 50%;
    color: #dd4b39;
    font-size: 40px;
    height: 30px;
    line-height: 30px;
    width: 30px;
    margin: 5px;


.background
    background-color:#cccccc;
    width:150px;
    height:60px;
    padding:60px 50px;

您可能需要使用一些边框半径、行高和边距，但我相信这是非常合适和更快的解决方案。

如果有错误请告诉我！

【参考方案6】：

请改用stacked icons。这是一个fiddle，您可以使用它来让它变得更好。以下是完整代码：

HTML

<ul class="list-inline">
    <li><a href="#">
        <span class="fa-stack fa-lg icon-facebook">
          <i class="fa fa-square fa-stack-2x"></i>
          <i class="fa fa-facebook fa-stack-1x"></i>
        </span>
        </a></li>
    <li><a href="#">
        <span class="fa-stack fa-lg icon-twitter">
          <i class="fa fa-square fa-stack-2x"></i>
          <i class="fa fa-twitter fa-stack-1x"></i>
        </span>
    </a></li>
    <li><a href="#">
        <span class="fa-stack fa-lg icon-gplus">
          <i class="fa fa-square fa-stack-2x"></i>
          <i class="fa fa-plus fa-stack-1x"></i>
        </span>
        </a></li>
</ul>  

CSS

.fa-stack-1x 
    color:white;

.icon-facebook 
   color:#3b5998;


.icon-twitter 
    color:#00aced;


.icon-gplus
    color:#dd4b39;


body 
    background-color: black;

【讨论】：

我试过了，但没有用：list.list-social> li.fa.fa-facebook.box-icon background: rgba(0, 59, 89, 152); 我们可以像提到的那样覆盖here 吗？

最后，this 为我工作，感谢您为小提琴提供的颜色，我使用了 .fa-wordpress color: #464646; 的 wordpress press