【问题标题】:Iconfont too small even with good px size图标字体太小,即使像素大小很好
【发布时间】:2018-10-25 10:05:26
【问题描述】:

我用 gulp-iconfont 创建了字体。有一堆svg图像。我可以在我的页面中看到它们,但它们太小了。我遗漏了一些明显但似乎找不到的东西。

<div class="slider show" alt="" style="">
            <div class="wrapper">
                <div class="row">
                    <div class="col-1">
                        <span><i class="s s-prev left-arrow"></i></span>
                    </div>
                    <div class="col-10">
                        <h1 class="title">
                            Itaque earum rerum hic tenetur
                        </h1>
                    </div>
                    <div class="col-1">
                        <span><i class="s s-next right-arrow"></i></span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6">
                        <p class="text">
                            At vero eos et accusamus et iusto 
                            odio dignissimos ducimus qui 
                            blanditiis praesentium voluptatum 
                            deleniti atque corrupti
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <button type="button" class="btn" style="background-image: url(./images/button_arrow_white.png);">Contact us</button>
                    </div>
                </div>
            </div>
        </div>

我在这部分有两个图标。左右箭头。这是 CSS 部分。

.s-prev , .s-next{
background-color: $white;
font-size: 65px;
color: black;
display: block;
}

.s-prev {
    float: left;
}

.s-next {
    float: right;
}
.arrow {
margin-bottom: 0;
  padding: 0;
}

我拍了一张照片给你看图标。

你可以看到里面有一个小黑点。但它是 65px,所以它应该更大。

【问题讨论】:

    标签: html css icons glyphicons


    【解决方案1】:

    尝试使用.s { font-size: 65px!important;}

    【讨论】:

    • @Bojan,图标是 .svg 文件还是网络字体?
    • 我用“iconfont”把.svg变成了字体
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-03-21
    • 1970-01-01
    • 2013-08-28
    • 1970-01-01
    • 2011-02-20
    • 1970-01-01
    相关资源
    最近更新 更多