如何在我的网页中定义类似FA图标的图标?

问题描述 投票:0回答:1
javascript css font-awesome
1个回答
0
投票

解决方法是仅使用 CSS,将 SVG 包含在

data:image/svg+xml...
中:

.fa-codeberg:before {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0.00 8.56C0.00 14.69 4.25 14.69 4.25 14.69 4.25 14.69 10.92 6.07 10.92 6.07 10.87 5.84 10.65 6.07 10.65 6.07 10.65 6.07 17.04 6.07 17.04 6.07 17.04 6.07 15.04 6.07 15.04 6.07 15.04 6.07 14.84 6.07 14.84 6.07 14.84 6.07 12.76 6.07 12.76 6.07 12.76 6.07 11.42 6.07 11.42 6.07 11.42 6.07 8.97 6.07 8.97 6.07 8.97 6.07 8.65 6.07 8.65 6.07 8.65 6.07 6.07 6.07 6.07 6.07 6.07 6.07 4.89 6.07 4.89 6.07 4.89 6.07 9.41 6.07 9.41 6.07 9.41 6.07 9.82 6.07 9.82 6.07 9.82 6.07 12.89 6.07 12.89 6.07 12.89 6.07 13.94 6.07 13.94 6.07 13.94 6.07 10.59 6.07 10.59 6.07 10.59 6.07 10.08 6.07 10.08 6.07 10.08 6.07 6.54 6.07 6.54 6.07 6.54 6.07 5.61 6.07 5.61 6.07 5.61 6.07 9.92 6.07 9.92 6.07 9.92 6.07 10.48 6.07 10.48 6.07 10.48 6.07 14.50 6.07 14.50 6.07 14.50 6.07 15.36 6.07 15.36 6.07 15.36 6.07 10.18 6.07 10.18 6.07 10.18 6.07 10.73 6.07 10.73 6.07 10.73 6.07 14.78 6.07 14.78 6.07 15.58 3.57 10.81 1.81 14.78 1.65 11.20 -6.35 6.78 -6.35 6.78 -6.35 6.78 -6.35 0.00 4.14 0.00 8.56ZM10.44 13.30C10.44 13.30 10.99 13.30 10.99 13.30 10.99 13.30 14.54 13.30 14.54 13.30 14.54 13.30 14.88 12.86 14.88 12.86 14.88 12.86 10.44 13.30 10.44 13.30ZM13.71 12.86C13.71 12.86 13.15 12.86 13.15 12.86 13.15 12.86 10.78 12.86 10.78 12.86 10.78 12.86 10.30 12.43 10.30 12.43 10.30 12.43 13.71 12.86 13.71 12.86ZM9.13 12.43C9.13 12.43 8.58 12.43 8.58 12.43 8.58 12.43 7.78 12.43 7.78 12.43 7.78 12.43 7.08 12.00 7.08 12.00 7.08 12.00 9.13 12.43 9.13 12.43Z"></path></svg>');
}
<i class="fa-codeberg"></i>

但是我想你想要这个有合适的外观,你提供的

svgPathData
看起来不太好......

.fa-codeberg:before {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 4.233 4.233"><defs><linearGradient xlink:href="%23a" id="b" x1="42519.285" x2="42575.336" y1="-7078.789" y2="-6966.931" gradientUnits="userSpaceOnUse"/><linearGradient id="a"><stop offset="0" stop-color="%23000" stop-opacity="0"/><stop offset=".495" stop-color="%23000" stop-opacity=".3"/><stop offset="1" stop-color="%23000" stop-opacity=".3"/></linearGradient></defs><path fill="url(%23b)" d="M42519.285-7078.79a.76.568 0 0 0-.738.675l33.586 125.888a87.182 87.182 0 0 0 39.381-33.763l-71.565-92.52a.76.568 0 0 0-.664-.28z" paint-order="stroke markers fill" style="font-variation-settings:normal" transform="translate(-1030.156 172.97) scale(.02428)"/><path fill="%23000" d="M2.113.12A2.117 2.117 0 0 0 .32 3.36l1.764-2.28c.013-.017.045-.017.058 0l1.764 2.28A2.117 2.117 0 0 0 2.113.12z" paint-order="markers fill stroke"/></svg>');
}
<i class="fa-brands fa-codeberg"></i>

© www.soinside.com 2019 - 2024. All rights reserved.