SOURCE

<div class="contenter">
    <div data-v-4377b470="" data-v-7e5cd9fc="" role="alert" class="alert">
        <div data-v-4377b470="" class="left">
            <svg data-v-4377b470="" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="svg-inline--fa fa-exclamation-triangle fa-w-18">
            <path data-v-4377b470="" fill="currentColor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z" class=""></path></svg>
        </div>
        <div data-v-4377b470="" class="right">
            <h2 data-v-4377b470="" class="title">
                使用SVG + JS框架编写自定义CSS
            </h2>
            <p data-v-4377b470="" class="content">
            使用我们的SVG框架时，请记住，默认情况下，基于Font Awesome的&lt;i&gt; DOM元素将替换为新的&lt;svg&gt;元素。 请确保您的CSS规则对应正确的元素。
            </p>
        </div>
    </div>
<div>

<div data-v-824d6b04="" data-v-7e5cd9fc="" role="alert" class="alert"><div data-v-824d6b04="" class="left"><svg data-v-824d6b04="" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="tree" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="svg-inline--fa fa-tree fa-w-12"><path data-v-824d6b04="" fill="currentColor" d="M378.31 378.49L298.42 288h30.63c9.01 0 16.98-5 20.78-13.06 3.8-8.04 2.55-17.26-3.28-24.05L268.42 160h28.89c9.1 0 17.3-5.35 20.86-13.61 3.52-8.13 1.86-17.59-4.24-24.08L203.66 4.83c-6.03-6.45-17.28-6.45-23.32 0L70.06 122.31c-6.1 6.49-7.75 15.95-4.24 24.08C69.38 154.65 77.59 160 86.69 160h28.89l-78.14 90.91c-5.81 6.78-7.06 15.99-3.27 24.04C37.97 283 45.93 288 54.95 288h30.63L5.69 378.49c-6 6.79-7.36 16.09-3.56 24.26 3.75 8.05 12 13.25 21.01 13.25H160v24.45l-30.29 48.4c-5.32 10.64 2.42 23.16 14.31 23.16h95.96c11.89 0 19.63-12.52 14.31-23.16L224 440.45V416h136.86c9.01 0 17.26-5.2 21.01-13.25 3.8-8.17 2.44-17.47-3.56-24.26z" class=""></path></svg></div><div data-v-824d6b04="" class="right"><h2 data-v-824d6b04="" class="title">为什么需要字体粗细值？</h2><p data-v-824d6b04="" class="content">
      尽管使用&lt;i&gt;或其他HTML元素是呈现图标的最流行和最简便的方法，但是如果您希望具有额外的标记，我们确实有使用自定义书面CSS伪元素的高级方法。 字体粗细与该技术一起使用，是设置图标样式的最佳方式。
      <strong data-v-824d6b04="" class="fw6"></strong></p></div></div>

*{
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}
html{
    font-size: 16px;
    font-weight: 400;
}
div {
    display: block;
}
p {
    margin: 20px 0;
    font-size: 16px;
}
.contenter{
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* 警告[data-v-4377b470]开始 */

.alert .left[data-v-4377b470], .alert[data-v-4377b470] {
    line-height: 1.15;
    font-family: fa5-proxima-nova,Helvetica Neue,Helvetica,Arial,sans-serif;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-direction: normal;
    text-align: left;
}
.alert[data-v-4377b470] {
    font-size: 16px;
    color: #495057;
    border-radius: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    overflow: hidden;
    background-color: #fff9db;
    margin-bottom: 1rem;
    margin-top: 1rem;
}
.alert .left[data-v-4377b470] {
    color: #fab005;
    background-color: #ffe066;
    padding: 3rem;
    font-size: 2rem;
}
svg:not(:root).svg-inline--fa {
    overflow: visible;
}
.svg-inline--fa.fa-w-18 {
    width: 1.125em;
}
.svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em;
}
.alert .right .title[data-v-4377b470], .alert .right[data-v-4377b470] {
    line-height: 1.15;
    font-family: fa5-proxima-nova,Helvetica Neue,Helvetica,Arial,sans-serif;
    color: #495057;
    text-align: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-direction: normal;
}
.alert .right[data-v-4377b470] {
    font-size: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 1.4rem;
}
.alert .right .title[data-v-4377b470] {
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.6rem;
}
.alert .right .title[data-v-4377b470], .alert .right[data-v-4377b470] {
    line-height: 1.15;
    font-family: fa5-proxima-nova,Helvetica Neue,Helvetica,Arial,sans-serif;
    color: #495057;
    text-align: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-direction: normal;
}
.alert .right .content .strong[data-v-4377b470], .alert .right .content[data-v-4377b470] {
    font-family: fa5-proxima-nova,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 1rem;
    color: #495057;
    text-align: left;
    -webkit-box-direction: normal;
    line-height: 1.5;
}
.alert .right .content[data-v-4377b470] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 0;
    margin-top: .25rem;
}
/* 警告[data-v-4377b470]结束 */

/* 提示[data-v-824d6b04]开始 */

.alert .left[data-v-824d6b04], .alert[data-v-824d6b04] {
    line-height: 1.15;
    font-family: fa5-proxima-nova,Helvetica Neue,Helvetica,Arial,sans-serif;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-direction: normal;
    text-align: left;
}
.alert[data-v-824d6b04] {
    font-size: 1rem;
    color: #495057;
    border-radius: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    overflow: hidden;
    background-color: #f1f3f5;
    margin-bottom: 1rem;
    margin-top: 1rem;
}
.alert .left[data-v-824d6b04] {
    color: #ced4da;
    padding: 1rem;
    font-size: 30px;
}
.alert .left[data-v-824d6b04], .alert[data-v-824d6b04] {
    line-height: 1.15;
    font-family: fa5-proxima-nova,Helvetica Neue,Helvetica,Arial,sans-serif;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-direction: normal;
    text-align: left;
}
svg:not(:root).svg-inline--fa {
    overflow: visible;
}
<style>
.svg-inline--fa.fa-w-12 {
    width: 0.75em;
}
<style>
.svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em;
}
user agent stylesheet
svg:not(:root) {
    overflow: hidden;
}
.alert .left[data-v-824d6b04] {
    color: #ced4da;
    padding: 3rem;
    font-size: 30px;
}
.alert .left[data-v-824d6b04], .alert[data-v-824d6b04] {
    line-height: 1.15;
    font-family: fa5-proxima-nova,Helvetica Neue,Helvetica,Arial,sans-serif;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-direction: normal;
    text-align: left;
}
.alert .right .title[data-v-824d6b04], .alert .right[data-v-824d6b04] {
    line-height: 1.15;
    font-family: fa5-proxima-nova,Helvetica Neue,Helvetica,Arial,sans-serif;
    color: #495057;
    text-align: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-direction: normal;
}
.alert .right[data-v-824d6b04] {
    font-size: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 1.4rem;
}
.alert .right .title[data-v-824d6b04] {
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 24px;
}
.alert .right .title[data-v-824d6b04], .alert .right[data-v-824d6b04] {
    line-height: 1.15;
    font-family: fa5-proxima-nova,Helvetica Neue,Helvetica,Arial,sans-serif;
    color: #495057;
    text-align: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-direction: normal;
}
.alert .right .title[data-v-824d6b04] {
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 24px;
}
.alert .right .title[data-v-824d6b04], .alert .right[data-v-824d6b04] {
    line-height: 1.15;
    font-family: fa5-proxima-nova,Helvetica Neue,Helvetica,Arial,sans-serif;
    color: #495057;
    text-align: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-direction: normal;
}
.alert .right .content .strong[data-v-824d6b04], .alert .right .content[data-v-824d6b04] {
    font-family: fa5-proxima-nova,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 16px;
    color: #495057;
    text-align: left;
    -webkit-box-direction: normal;
    line-height: 1.5;
}
.alert .right .content[data-v-824d6b04] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 0;
    margin-top: .25rem;
}
/* 提示[data-v-824d6b04]结束 */