我想在标签内居中放置一种字体,并禁用蓝色,但到目前为止,我的目标还没有成功。
另外,我希望图标更大一些,但font-awesome支持的最大大小为5x。

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

要重现该问题,请访问下面的链接
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
}

最佳答案

在这个小提琴中找到您的解决方案:https://jsfiddle.net/z0vvpddf/2/

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

关于html - 如何在<a>标记内居中显示超棒字体图标并禁用链接颜色,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30645394/

10-10 15:23