我似乎無法讓我的字體很棒的圖示（一個研究門圖示）有一個邊界半徑。我已經嘗試了 svg 和直接鏈接，但是 border-radius CSS 規則似乎并不適用。
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<a href="https://www.researchgate.com"><i class="fab fa-researchgate"></i></a>
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="researchgate" class="svg-inline--fa fa-researchgate fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 32v448h448V32H0zm262.2 334.4c-6.6 3-33.2 6-50-14.2-9.2-10.6-25.3-33.3-42.2-63.6-8.9 0-14.7 0-21.4-.6v46.4c0 23.5 6 21.2 25.8 23.9v8.1c-6.9-.3-23.1-.8-35.6-.8-13.1 0-26.1.6-33.6.8v-8.1c15.5-2.9 22-1.3 22-23.9V225c0-22.6-6.4-21-22-23.9V193c25.8 1 53.1-.6 70.9-.6 31.7 0 55.9 14.4 55.9 45.6 0 21.1-16.7 42.2-39.2 47.5 13.6 24.2 30 45.6 42.2 58.9 7.2 7.8 17.2 14.7 27.2 14.7v7.3zm22.9-135c-23.3 0-32.2-15.7-32.2-32.2V167c0-12.2 8.8-30.4 34-30.4s30.4 17.9 30.4 17.9l-10.7 7.2s-5.5-12.5-19.7-12.5c-7.9 0-19.7 7.3-19.7 19.7v26.8c0 13.4 6.6 23.3 17.9 23.3 14.1 0 21.5-10.9 21.5-26.8h-17.9v-10.7h30.4c0 20.5 4.7 49.9-34 49.9zm-116.5 44.7c-9.4 0-13.6-.3-20-.8v-69.7c6.4-.6 15-.6 22.5-.6 23.3 0 37.2 12.2 37.2 34.5 0 21.9-15 36.6-39.7 36.6z"></path></svg>
.svg-inline--fa.fa-researchgate.fa-w-14 {
color:#40BA9B;
border-radius: 25px !important;
border:1px !important;
height:25px;
width:25px;
vertical-align: bottom;
}
這可能嗎？我沒有其他解決方案。
uj5u.com熱心網友回復：
SVG 代碼本身不是正方形，因此它似乎沒有border-radius正確采用。這是將 SVG 代碼更新為方形尺寸后的示例。然而，這確實改變了 FontAwesome 圖示，所以我不一定推薦這條路線 - 我只是想解釋為什么并提供一個例子。
svg.fa-researchgate {
color: #40BA9B;
border-radius: 50%;
height: 25px;
width: 25px;
}<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="researchgate" class="svg-inline--fa fa-researchgate" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 448"><path fill="currentColor" d="M0,0V448H448V0ZM262.2,334.4c-6.6,3-33.2,6-50-14.2-9.2-10.6-25.3-33.3-42.2-63.6-8.9,0-14.7,0-21.4-.6v46.4c0,23.5,6,21.2,25.8,23.9v8.1c-6.9-.3-23.1-.8-35.6-.8-13.1,0-26.1.6-33.6.8v-8.1c15.5-2.9,22-1.3,22-23.9V193c0-22.6-6.4-21-22-23.9V161c25.8,1,53.1-.6,70.9-.6,31.7,0,55.9,14.4,55.9,45.6,0,21.1-16.7,42.2-39.2,47.5,13.6,24.2,30,45.6,42.2,58.9,7.2,7.8,17.2,14.7,27.2,14.7v7.3Zm22.9-135c-23.3,0-32.2-15.7-32.2-32.2V135c0-12.2,8.8-30.4,34-30.4s30.4,17.9,30.4,17.9l-10.7,7.2s-5.5-12.5-19.7-12.5c-7.9,0-19.7,7.3-19.7,19.7v26.8c0,13.4,6.6,23.3,17.9,23.3,14.1,0,21.5-10.9,21.5-26.8H288.7V149.5h30.4c0,20.5,4.7,49.9-34,49.9ZM168.6,244.1c-9.4,0-13.6-.3-20-.8V173.6c6.4-.6,15-.6,22.5-.6,23.3,0,37.2,12.2,37.2,34.5C208.3,229.4,193.3,244.1,168.6,244.1Z"></path></svg>uj5u.com熱心網友回復：
在它周圍放置陰影CSS drop-shadow()
例如像這樣：
svg {
color:#40BA9B;
height:50px;
width:50px;
}
#example_1 {
filter:
drop-shadow(2px -2px 0px black)
drop-shadow(-2px 2px 0px black)
drop-shadow(2px 2px 0px black)
drop-shadow(-2px -2px 0px black)
}<svg id="example_1" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="researchgate" class="svg-inline--fa fa-researchgate fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 32v448h448V32H0zm262.2 334.4c-6.6 3-33.2 6-50-14.2-9.2-10.6-25.3-33.3-42.2-63.6-8.9 0-14.7 0-21.4-.6v46.4c0 23.5 6 21.2 25.8 23.9v8.1c-6.9-.3-23.1-.8-35.6-.8-13.1 0-26.1.6-33.6.8v-8.1c15.5-2.9 22-1.3 22-23.9V225c0-22.6-6.4-21-22-23.9V193c25.8 1 53.1-.6 70.9-.6 31.7 0 55.9 14.4 55.9 45.6 0 21.1-16.7 42.2-39.2 47.5 13.6 24.2 30 45.6 42.2 58.9 7.2 7.8 17.2 14.7 27.2 14.7v7.3zm22.9-135c-23.3 0-32.2-15.7-32.2-32.2V167c0-12.2 8.8-30.4 34-30.4s30.4 17.9 30.4 17.9l-10.7 7.2s-5.5-12.5-19.7-12.5c-7.9 0-19.7 7.3-19.7 19.7v26.8c0 13.4 6.6 23.3 17.9 23.3 14.1 0 21.5-10.9 21.5-26.8h-17.9v-10.7h30.4c0 20.5 4.7 49.9-34 49.9zm-116.5 44.7c-9.4 0-13.6-.3-20-.8v-69.7c6.4-.6 15-.6 22.5-.6 23.3 0 37.2 12.2 37.2 34.5 0 21.9-15 36.6-39.7 36.6z"></path></svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/397362.html
標籤：html css svg font-awesome-5