如何在 <a> 标签内居中字体超棒的图标并禁用 link 颜色

Question

我想在标签中居中放置超棒的字体并禁用蓝色，但到目前为止我还没有成功。另外我希望图标大一点但是font-awesome支持的最大尺寸是5x.

你能帮我解决这些问题吗谢谢

要重现问题，请访问下面的 link https://jsfiddle.net/z0vvpddf/

HTML

   <div class="col-sm-4 portfolio-item ">
        <a href="<c:url value='/'></c:url>" class="portfolio-link" data-toggle="modal"> 
          <span class="caption"> 
              <span class="caption-content"> 
                <i>Wall</i>
              </span>
             </span> 
          <i class="fa fa-home fa-5x"></i>
        </a>
    </div>

CSS:

#portfolio .portfolio-item 
{
    right: 0;
    margin: 0 0 15px;
}

#portfolio .portfolio-item .portfolio-link 
{
    display: block;
    position: relative;
    margin: 0 auto;
    max-width: 400px;
}

#portfolio .portfolio-item .portfolio-link .caption 
{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: #004DFA;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s;
}

#portfolio .portfolio-item .portfolio-link .caption:hover 
{
    opacity: 0.9;
}

#portfolio .portfolio-item .portfolio-link .caption .caption-content 
{
    position: absolute;
    top: 50%;
    width: 100%;
    height: 20px;
    margin-top: -12px;
    text-align: center;
    font-size: 20px;
    color: #fff;
}

#portfolio .portfolio-item .portfolio-link .caption .caption-content i 
{
    margin-top: -12px;
}

#portfolio .portfolio-item .portfolio-link .caption .caption-content h3,
#portfolio .portfolio-item .portfolio-link .caption .caption-content h4 
{
    margin: 0;
}

#portfolio * 
{
    z-index: 2;
}

@media(min-width:767px) 
{
    #portfolio .portfolio-item 
    {
        margin: 0 0 30px;
    }
}

img.displayed 
{
    display: block;
    margin-left: auto;
    margin-right: auto 
}

Answer 1

像这样：

#portfolio .portfolio-item .portfolio-link {color: #000;}
#portfolio .portfolio-item .portfolio-link:hover {color: #fff;}
#portfolio .portfolio-item .portfolio-link:hover .fa {font-size: 10em;} /* 10x */

Fiddle: https://jsfiddle.net/praveenscience/z0vvpddf/1/

检查这个，可能是？

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css");
.portfolio-link, .portfolio-link:hover {color: #000;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-md-2 col-md-offset-4">
      <a href="#" class="portfolio-link" data-toggle="modal">
        <span class="caption pull-right"> 
          <span class="caption-content">Wall</span>
        </span> 
        <i class="fa fa-home fa-5x"></i>
      </a>
    </div>
  </div>
</div>

Answer 2

我将逐一回答您的问题：

如何让图标居中？我将以下 CSS 添加到您已有的选择器中。

#portfolio .portfolio-item .portfolio-link { text-align: center; }

#portfolio .portfolio-item .portfolio-link .caption { left: 0; }

#portfolio .portfolio-item .portfolio-link .caption .caption-content { left: 0; }
如何增加图标的大小？您可以创建自己的 css 通过设置字体大小来执行此操作。 Font-awesome 使用 em 单位，所以 .fa-5x 就是 5em.

.fa-7x { font-size: 7em; }
如何更改颜色？更改 <a>、
的颜色
#portfolio .portfolio-item .portfolio-link { color: green; }

改变图标的颜色，

`&#35;portfolio .portfolio-item .portfolio-link .fa {
    color: red;
}`

Answer 3

可以像普通字体一样控制字体图标。您可以使用 color font-size 和 text-align css 属性根据您的目的设置它们的样式，以及 text-shadow 和其他特定于文本的样式。

对 connexo 的 fiddle 的修改以删除悬停时的下划线并增加字体（图标）大小：

https://jsfiddle.net/4za5y63s/

Answer 4

在此 fiddle 中找到您的解决方案：https://jsfiddle.net/z0vvpddf/2/

#portfolio .portfolio-item .portfolio-link .fa-home {
    display: block;
    text-align: center;
    color: #000;
    z-index: -1;
}

如何在 <a> 标签内居中字体超棒的图标并禁用 link 颜色

How to centre font-awesome icons within <a> tag and disable link colour

html

css

twitter-bootstrap

font-awesome

Fiddle: https://jsfiddle.net/praveenscience/z0vvpddf/1/