这个问题已经在这里有了答案:

我有一个自定义元素,SASS如下所示:

.tile {    
    &.account-tile:before {
        font-family: FontAwesome;
        content: "\f003";
    }
}

.tile:before {
    color: rgba(255,255,255,0.5);
    font-size: 50px;
}

这些图块大小不同。 我想将图标放置在图块的中央,但不确定如何有效地执行此操作。 有人可以帮我吗?

更新1

我将SASS更改为:

.tile {    
    &.account-tile:before {
        font-family: FontAwesome;
        content: "\f007";
    }
}

.tile:before {
    color: rgba(255,255,255,0.5);
    font-size: 100px;
    display: block;
    text-align: center;
    vertical-align: middle;
    background-color: pink;
    height: 100%;
}

但是,尽管它水平居中,但它并不垂直居中。

#1楼 票数:0

由于Font Awesome是一种字体,请尝试text-align: center;

  ask by r3plica translate from so

未解决问题?本站智能推荐:

1回复

如何居中fontawesome图标的位置:绝对div?

我需要在div内将position-absolute的字体真棒图标居中。 我需要在左下角制作三角形,如图所示: 我的HTML: 我的Sass: 使用此代码,我在图像上有一个三角形,但是我的字体超赞图标位于蓝色三角形的外部。
1回复

Font Awesome和Sass在我的项目中失败

我正在Windows上工作,并且正在使用Bower,这是我的app.sass: 我在Linux上具有相同的项目,并且运行良好,但是在Windows上失败,这是bug:
1回复

正方形而不是图标 fontawesome

我试图从 fontawesome 向我的网站添加一个图标。 我想做的是在不使用cdns的情况下导入它。 我的 html 代码如下所示: 我的 app.scss 文件如下所示: 它起作用的唯一方法是添加以下内容: 但我真的想把它保留在本地...
7回复

仅针对使用过的类优化 Font Awesome

我正在使用 Font Awesome Sass 文件https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass使其成为_font-awesome.sass以便我可以在我的 Sass 项目中使用@impo
2回复

使用scss导入时未显示Font Awesome

这是我在laravel全新安装上的app.scss上的代码 构建我的app.css之后,看起来像这样 但是当我加载页面时,图标显示为白色正方形,并且在控制台上查看时看到此错误 这是有道理的,因为我的文件夹结构是这样的 如何更改已加载的字体真棒目录或另一种显示字体真棒图标的方式? 我
2回复

FontAwesome不使用SCSS显示图标

我正在尝试将Font Awesome加载到我的项目中,但是由于某些原因,图标显示为空白。 我加载图标的方式如下: 当我使用图标时,例如<i class="fal fa-chevron-circle-right"></i> ,它会获取Font Awesome 5 Pro字体
1回复

如何从 FontAwesome 制作具有相同宽度的图标

我有几个带有图标的块: 对于他们,我有下一个造型: 该块应该是具有相同大小的圆形,但不知何故图标具有不同的宽度,我得到椭圆和圆形。 如何使它们大小相同? 由于它的图标来自 FontAwesone,我尝试使用 fa-fw 属性: <i class="fa-fw fas fa-map-ma
1回复

如何在Twitter Bootstrap图标和Font Awesome图标之间实现奇偶校验

在Ruby on Rails 3.2应用程序中我使用Twitter Bootstrap-Sass v 2.0.3和Font Awesome都安装为Gems。 我正在使用'Font Awesome',因为我想改变Bootstrap Icons的颜色。 我的问题是我的图标在彼此对齐方面是