在 CSS 属性中将图标字体设置为背景

Posted 2023-03-05

【中文标题】在 CSS 属性中将图标字体设置为背景

【英文标题】：Set icon font as background in CSS property

【发布时间】：2012-12-01 22:04:20

【问题描述】：

我要做的就是用图标字体而不是图标图像替换 CSS 中的背景图像。 我无法完成它。 这是 CSS 属性：

.social-networks .twitterbackground:url(../images/social/twitter.png);

这是php中的代码：

<ul class="social-networks">
    <?php if (my_option('twitter_link')): ?>
        <li>
            <a href="<?php echo my_option('twitter_link'); ?>"  class="twitter">twitter</a>
        </li>
    <?php endif; ?>

我插入incon字体的方式是<span class="icon">A</span>

【问题讨论】：

我认为这是不可能的，除非（可能）在 Firefox 中：JS Fiddle demo。 （但我不确定我是否理解您的问题或要求）。

我只是想调用一个图标字体作为css属性的背景，有什么办法吗？

【参考方案1】：

你可以试试这样的：FIDDLE

假设你有你的 DIV：

<div class="test"></div>

您可以像这样创建您的 css 样式：

.test 
    width: 100px;
    height: 100px;
    border: 2px solid lightblue;


.test:before 
    content: "H";
    width: 100%;
    height: 100%;
    font-size: 5.0em;
    text-align: center;
    display: block;
    line-height: 100px;
​

在content属性中选择“字母”，然后可以更改font-size、font-weight、color等...

【讨论】：

请注意，这不适用于替换内容，例如输入，因为它们不能包含任何子项（<button> 除外）

【参考方案2】：

css中有一个content属性：

.icon-rocket:after 
   content: "Symbol for rocket";

http://www.w3schools.com/cs-s-ref/pr_gen_content.asp

【参考方案3】：

使用导航文字代替背景图片。

$(".slider").owlCarousel(
    navigation : true,
    slideSpeed : 500,
    singleItem:true,
    navigationText:['<i class="fa fa-chevron-left" aria-hidden="true"></i>', '<i class="fa fa-chevron-right" aria-hidden="true"></i>']
);

并为字体真棒图标设置 css 属性。 这是图标的普通 css。

.owl-button
   position:relative;

.owl-prev 
   position:absolute;
   top:0;
   left:47%;
   font-size: 30px;

.owl-next 
    position:absolute;
    top:0;
    right:47%;
    font-size: 30px;

【参考方案4】：

我想出了一些有趣的东西，imo：CSS element() 函数。目前它是works only in firefox（所以请确保您在该浏览器的末尾打开链接的示例）。

这里是 html：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet">

<div class="bg-patterns">
  <i class="material-icons" id="icon">pets</i>
</div>

<div class="with-icon-bg">
   Hi! I'm paragraph with background made from ordinary HTML element! And BTW - I'm a pets lover. 
</div>

...和带有 cmets 的 CSS：

.material-icons 
  /* icon font */
  font-family: 'Material Icons'; 
  color: #ddd;


/* this is a wrapper for elements you want to use
as backgrounds, should not be visible on page */
.bg-patterns 
  margin-left: -90000cm; 


.with-icon-bg 
  /* all magic happens here */
  background: -moz-element(#icon);


  /* other irrelevant styling */
  font-size: 25px;
  width: 228px;
  margin: 0 auto;
  padding: 30px;
  border: 3px dashed #ddd;
  font-family: sans-serif;
  color: #444;
  text-align: center;

最后 - 有一个 working example (jsFiddle)。