边界半径打破字体真棒？

Question

我正在尝试在font-awesome图标上添加package org.techzoo.async; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.ServletOutputStream; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/async") public class AsyncServlet extends HttpServlet { public AsyncServlet() { super(); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String headerName = request.getHeader("x-requested-with"); if(null == headerName){ PrintWriter out = response.getWriter(); String html = "<h3>Clinet send a Synchronous request</h3>" + "<p><a href=\"index.jsp\">Go Back</a> to main page</p>"; out.write(html); } else { ServletOutputStream out = response.getOutputStream(); out.print("Ajax Request Detected"); out.flush(); } } } 然后border，但它在顶部和底部显示黑洞。这是问题的图像

我这是我的CSS代码

border-radius

Answer 1

你必须把这个元素放在代码中

overflow: hidden;

试试这可能有效

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

http://fontawesome.io/examples/

Answer 2

Bilal，正如Suresh所说，你不能在font-awesome上使用border-radius，因为font-awesome是SVG图像的集合。但是，您可以尝试使用白色背景填充圆圈，使文本变小并使字体变黑。

body
{
    background: #000;
}

.button
{
    background: #FFF;
    color: #000;
    padding: 5px;
    font-size: 20px;
    border-radius: 15px;
}

结果：http://jsfiddle.net/7rjkwqft/

Answer 3

您可以通过在fa-circle图标上堆叠其他图标来使其看起来呈圆形。此外，可以使用班级fa-inverse来反转颜色。

  

要堆叠多个图标，请使用父级的fa-stack类   fa-stack-1x用于常规大小的图标，fa-stack-2x用于   更大的图标。 fa-inverse可以用作替代图标颜色。您   甚至可以在父母身上抛出更大的图标类来进一步发展   控制尺寸。

     

- http://fortawesome.github.io/Font-Awesome/examples/

此处（较小的）社交图标堆叠在（较大的）fa-circle图标上。还要注意，这些不是方形版本即。不要使用facebook-square，twitter-square等

body {
  background-color: black;
}
input {
  background-color: #E88080;
  border: 0px;
  border-radius: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
  <input type="text" />
  <span class="fa-stack">
    <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
    <i class="fa fa-search fa-stack-1x"></i>
  </span>
</div>
<div class="social">
  <span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
  <i class="fa fa-linkedin fa-stack-1x"></i>
</span>
  <span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
  <i class="fa fa-facebook fa-stack-1x"></i>
</span>
  <span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
  <span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
  <i class="fa fa-instagram fa-stack-1x"></i>
</span>
</div>
<h6 style="color:white; font-family:monospace">Note that if you have ad blocking active on this page, you won't be able to see the icons.</h6>