文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么我的字体不是很棒的图标背景加载？

问为什么我的字体不是很棒的图标背景加载？
EN

Stack Overflow用户

提问于 2020-04-25 07:02:59

回答 2查看 105关注 0票数 0

我是新来的网站开发，我现在正在学习CSS。我有这个问题，根据背景为其他2个图标已经加载，但第二个没有。

.bg-instagram {
  padding: 7px 10px;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.bg-whatsapp {
  padding: 7px 10px;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background: green;
}

.bg-facebook {
  padding: 7px 13px;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background: #3b5998;
}

<div class="container shadow rounded-pill bg-white py-5">
  <p>
    <a class="fa-icon mx-4" href="#" title="">
      <i class="fa fa-instagram fa-2x text-white bg-instagram"></i>
    </a>
    <a class="fa-icon mx-4" href="#" title="">
      <i class="fa fa-whatsapp fa-2x text-dark bg-whatsapp"></i>
    </a>
    <a class="fa-icon mx-4" href="#" title="">
      <i class="fa fa-facebook fa-2x text-white bg-facebook"></i>
    </a>
  </p>
</div>

我希望有人能帮我找出我的代码中任何明显的问题。谢谢!

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-04-27 04:54:18

对不起，让问题悬而未决，我意识到它没有加载，因为我不得不硬刷新浏览器为它加载css文件！

票数 1

Stack Overflow用户

发布于 2020-04-25 08:39:27

看看这个，字体很棒。我想你忘了用字体很棒的CDN。

没有图标，我在字体中找到了这个名字..fa图标类.

.bg-instagram {
  padding: 7px 10px;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.bg-whatsapp {
  padding: 7px 10px;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background: green;
}

.bg-facebook {
  padding: 7px 13px;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background: #3b5998;
}

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container shadow rounded-pill bg-white py-5">
  <p>your code</p>
    <a class="fa-icon mx-4" href="#" title="">
      <i class="fa fa-instagram fa-2x text-white bg-instagram"></i>
    </a>
    <a class="fa-icon mx-4" href="#" title="">
      <i class="fa fa-whatsapp fa-2x text-dark bg-whatsapp"></i>
    </a>
    <a class="fa-icon mx-4" href="#" title="">
      <i class="fa fa-facebook fa-2x text-white bg-facebook"></i>
    </a>
  <br /><br />
   <p>my different  code</p>
    <i class="fa fa-facebook-official" aria-hidden="true" style="background-color:blue; font-size:40px;"></i>
  <i class="fa fa-instagram" aria-hidden="true" style=" background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); font-size:40px;"></i>
  <i class="fa fa-whatsapp" aria-hidden="true" style="background-color:green; font-size:40px;"></i>
</div>
</body>
</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61422106

复制

相似问题

问为什么我的字体不是很棒的图标背景加载？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的字体不是很棒的图标背景加载？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的字体不是很棒的图标背景加载？
EN