1
私は左と右のテキストアイコンを使って証言ブロックを作成しようとしていますが、別々のブロックとマークアップにも埋め込まれます。私は基礎グリッド6を使用しますが、 WP上のビジュアルコンポーザーで使用します。このブロックを応答性と再利用性にするには、ロゴ（オン/オフ）、リンクオン/オフを使用する必要があります。アイコンはスパンタグでなければなりません。：afterまたは：before。誰かが最適なソリューションを提供している場合はCodepen証言ブロック/再利用可能
<div class="vc-testimonial text-center">
<div class="vc-testimonial-logo"><img src="../images/shavlik-logo.png"></div>
<div class="vc-testimonial-text">
<h5><span class="icon icon-globe-half"></span><span class="icon icon-globe-half"></span>“60% of organizations that have used Office 365 have found it to be financially beneficial to their organizations”<span class="icon icon-globe-half icon-rotate"></span><span class="icon icon-globe-half icon-rotate"></span></h5>
</div>
<div class="vc-testimonial-link"><a class="primary small">Read full story</a></div>
<div class="vc-testimonial-athor">
<p>Uģis Peiko, IT speciālists</p>
</div>
</div>
.vc-testimonial{
max-width: 75em;
// margin-left: auto;
// margin-right: auto;
padding: rem-calc(60 0);
&-logo{
img{
width: auto;
}
}
&-logo + &-text{
margin-top: 20px;
}
&-text{
h5 + span {
// padding-left: rem-calc(55);
// margin-right: rem-calc(55);
}
span + h5 {
// padding-left: rem-calc(55);
// margin-right: rem-calc(55);
}
}
&-text + &-link, &-text + &-athor{
margin-top: rem-calc(20);
}
&-link{
}
&-link + &-athor{
margin-top: rem-calc(20);
}
&-athor{
}
}