javascript - 更改由其他网站中的 css 文件控制的图标

Question

所以我下载了这个:

http://www.andwecode.com/playground-demo/pop-up-login-signup-box-jquery/

你可以在那里看到演示，就像你看到的那样:

<link
    rel="stylesheet"
    href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />

这是 css 代码的一部分:

open:before { content: "\f07c"; }
.fa-arrows-v:before { content: "\f07d"; }
.fa-arrows-h:before { content: "\f07e"; }
.fa-bar-chart-o:before { content: "\f080"; }
.fa-twitter-square:before { content: "\f081"; }
.fa-facebook-square:before { content: "\f082"; }
.fa-camera-retro:before { content: "\f083"; }
.fa-key:before { content: "\f084"; }
.fa-gears:before,.fa-cogs:before { content: "\f085"; }
.fa-comments:before { content: "\f086"; }
.fa-thumbs-o-up:before { content: "\f087"; }
.fa-thumbs-o-down:before { content: "\f088"; }
.fa-star-half:before { content: "\f089"; }
.fa-heart-o:before { content: "\f08a"; }
.fa-sign-out:before { content: "\f08b"; }
.fa-linkedin-square:before { content: "\f08c"; }
.fa-thumb-tack:before { content: "\f08d"; }
.fa-external-link:before { content: "\f08e"; }
.fa-sign-in:before { content: "\f090"; }
.fa-trophy:before { content: "\f091"; }
.fa-github-square:before { content: "\f092"; }
.fa-upload:before { content: "\f093"; }
.fa-lemon-o:before { content: "\f094"; }
.fa-phone:before { content: "\f095"; }
.fa-square-o:before { content: "\f096"; }
.fa-bookmark-o:before { content: "\f097"; }
.fa-phone-square:before { content: "\f098"; }
.fa-twitter:before { content: "\f099"; }
.fa-facebook:before { content: "\f09a"; }
.fa-github:before { content: "\f09b"; }
.fa-unlock:before { content: "\f09c"; }
.fa-credit-card:before { content: "\f09d"; }
.fa-rss:before { content: "\f09e"; }
.fa-hdd-o:before { content: "\f0a0"; }
.fa-bullhorn:before { content: "\f0a1"; }
.fa-bell:before{content:"

样式表在网站上，我找不到如何更改 facebook 和 gmail 图标知道如何解决这个问题吗？

Answer 1

Font Awesome是一种图标字体，用于在网页中轻松插入常用的、可无限缩放的图标。由于它是一种字体，因此您无法轻松替换单个图标并仍然使用 Font Awesome。你有几个选择。在您链接的示例页面中，这是生成 Facebook 图标的 HTML:

<a href="#" class="social_box fb">
    <span class="icon"><i class="fa fa-facebook"></i></span>
    <span class="icon_title">Connect with Facebook</span>
</a>

那个 i 标签就是创建图标的。您可以更改正在应用的类以使用 any of the other icons that are a part of Font Awesome ，或调整 HTML 和 CSS 以使用您自己的图像。

HTML:

<a href="#" class="social_box fb">
    <span class="icon facebook_icon"> </span>
    <span class="icon_title">Connect with Facebook</span>
</a>

CSS:

span.facebook_icon {
    width:30px;
    height:30px;
    background-image:url('images/facebook.png');
}