【发布时间】：2016-10-23 10:28:38
【问题描述】：
我正在尝试创建一个网站，并且我正在尝试实现响应式图标字体。我已经成功了（使用媒体查询），但是当屏幕发生变化时，空间开始显示并随着屏幕尺寸变小而增长。
Small Screen size - Large space between icon fonts and the text
Big screen size - small space between icon fonts and text
这是我的 HTML 代码 - 我尝试删除“”作为消除换行符的一种方式：
<div class="item">
<span class = "icon-mobile">
<span class="caption">Call </div>
<div class="item">
<span class = "icon-mail">
<span class="caption">Email </div>
<div class="item">
<span class = "icon-location">
<span class="caption">Studio </div>
<div class="item">
<span class = "icon-calendar">
<span class="caption">Hours</div>
这是上述 HTML div/类的 CSS3 代码（.contact_details 是容器）：
.contact_details{
text-align: center;
}
.item {
vertical-align: top;
display: inline-block;
width:auto;
height:auto;
margin:0% auto;
color: #b31b1b;
}
/* Text Below Icon Fonts*/
.caption {
display: block;
text-align: center;
}
CSS3 媒体查询代码为：
@media screen and (max-width: 299px) {
.icon-mail:before, .icon-mobile:before, .icon-calendar:before, .icon-location:before, .item {
font-size: 2vw;
}
.caption {
font-size: 1.5vw;
}
}
@media screen and (min-width: 300px) and (max-width: 799px) {
.icon-mail:before, .icon-mobile:before, .icon-calendar:before, .icon-location:before, .item{
font-size: 90%;
}
.caption {
font-size: 30%;
}
}
@media screen and (min-width: 800px) {
.icon-mail:before, .icon-mobile:before, .icon-calendar:before, .icon-location:before, .item {
font-size: 5vw;
}
.caption {
font-size: 2vw;
}
}
我尝试添加“高度：50px;”和“高度：自动；”到标题和项目类。在网站上创建重复行后，我尝试创建一个 flexbox 进行测试：
.contact_details2{
display: flex;
justify-content: center;
}
.item2{
flex: 1 1 20em;
padding: 0!important;
}
.caption{
padding: 0!important;
}
这是图标字体的代码，以防它对某人有用：
@font-face {
font-family: 'debssite';
src: url('fonts/debssite.eot');
src: url('fonts/debssite.eot?#iefix') format('embedded-opentype'),
url('fonts/debssite.woff2?') format('woff2'),
url('fonts/debssite.woff?') format('woff'),
url('fonts/debssite.ttf?') format('truetype'),
url('fonts/debssite.svg?') format('svg');
font-weight: normal;
font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'debssite';
src: url('./fonts/debssite.svg?#debssite') format('svg');
}
}
*/
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "debssite";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-calendar:before {
content: "\e800";
font-size: 64px;
color: #b31b1b;
}
.icon-location:before {
content: "\e801";
font-size: 64px;
color: #b31b1b;
}
.icon-mail:before {
content: "\e802";
font-size: 64px;
color: #b31b1b;
}
.icon-facebook:before {
content: "\f09a";
font-size: 32px;
color: #b31b1b;
margin-right 4%;
}
.icon-mobile:before {
content: "\f10b";
font-size: 64px;
color: #b31b1b;
margin:0px;
}
.icon-youtube:before {
content: "\f167";
font-size: 32px;
color: #b31b1b;
margin-right 4%;
}
.icon-instagram:before {
content: "\f16d";
font-size: 32px;
color: #b31b1b;
margin-right 4%;
}
.icon-pinterest:before {
content: "\f231";
font-size: 32px;
color: #b31b1b;
margin:10px;
}
即使您认为您的评论没有帮助（可能是！），我也将感谢您尝试解决此问题的任何帮助/cmets。
谢谢，
理查德
创建了一个编辑来添加图标字体的代码。
【问题讨论】：
-
这里是我的网站的链接，其中出现错误：link
-
就好像“容器”保持不变并且没有缩小，但里面的内容却可以。就像图标是垂直对齐的：顶部和标题是垂直的：底部。
-
我通过使用“px”来引用图标和文本的文本大小，然后将媒体查询中的大小更改为“vw”。这和它有关系吗？
标签： html wordpress css icon-fonts