使用 CSS 反射图标字体

Question

我正在做一个个人项目（将使用基于 webkit 的浏览器），我想为我的图标使用类似 font awsesome 之类的字体，所以我可以通过主题更改来更改颜色、缩放它们等。

有没有办法在不将其转换为图像的情况下进行反射。 （我可以接受，只要我仍然能够更改颜色 - 例如，如果我将图像转换为黑色文本，然后更改为使用蓝色文本的主题，我希望能够使用 LESS/CSS 更改颜色）。

附上一个例子

谢谢

标记

Answer 1

我解决了它（对于 webkit，这是我在这个项目中所需要的：一旦有更广泛的支持 element() 将重做）

JSFiddle 在这里：http://jsfiddle.net/dHBLT/2/

HTML：

<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="560" height="32" viewBox="0 0 560 32">
    <defs>
        <g id="icon-home">
            <path class="path1" d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
        </g>
        <g id="icon-music">
            <path class="path1" d="M10 6l22-6v23c0 2.761-3.134 5-7 5s-7-2.239-7-5c0-2.761 3.134-5 7-5 1.074 0 2.091 0.173 3 0.481v-10.3l-14 3.818v15c0 2.761-3.134 5-7 5-3.866 0-7-2.239-7-5 0-2.761 3.134-5 7-5 1.074 0 2.091 0.173 3 0.481v-16.481z"></path>
        </g>
        <g id="icon-headphones">
            <path class="path1" d="M6 18.071v13.857c0.327 0.047 0.66 0.071 1 0.071h1v-14h-1c-0.34 0-0.673 0.025-1 0.071zM24 18v14h1c0.34 0 0.673-0.025 1-0.071v-13.857c-0.327-0.047-0.66-0.071-1-0.071h-1zM32 16c0-8.837-7.163-16-16-16s-16 7.163-16 16c0 1.919 0.338 3.76 0.958 5.465-0.609 1.038-0.958 2.245-0.958 3.535 0 2.792 1.635 5.202 4 6.326v-12.652c-0.629 0.299-1.206 0.689-1.714 1.153-0.187-0.913-0.286-1.859-0.286-2.827 0-7.732 6.268-14 14-14s14 6.268 14 14c0 0.969-0.098 1.914-0.286 2.827-0.509-0.464-1.085-0.854-1.714-1.153v12.652c2.365-1.124 4-3.534 4-6.326 0-1.29-0.349-2.498-0.958-3.535 0.62-1.705 0.958-3.546 0.958-5.465z"></path>
        </g>
        <g id="icon-film">
            <path class="path1" d="M0 4v24h32v-24h-32zM6 26h-4v-4h4v4zM6 18h-4v-4h4v4zM6 10h-4v-4h4v4zM24 26h-16v-20h16v20zM30 26h-4v-4h4v4zM30 18h-4v-4h4v4zM30 10h-4v-4h4v4zM12 10v12l8-6z"></path>
        </g>
        <g id="icon-camera">
            <path class="path1" d="M12 9c0-2.761 2.239-5 5-5s5 2.239 5 5c0 2.761-2.239 5-5 5-2.761 0-5-2.239-5-5zM0 9c0-2.761 2.239-5 5-5s5 2.239 5 5c0 2.761-2.239 5-5 5-2.761 0-5-2.239-5-5zM24 19v-3c0-1.1-0.9-2-2-2h-20c-1.1 0-2 0.9-2 2v10c0 1.1 0.9 2 2 2h20c1.1 0 2-0.9 2-2v-3l8 5v-14l-8 5zM20 24h-16v-6h16v6z"></path>
        </g>
        <g id="icon-busy">
            <path class="path1" d="M22.781 16c4.305-2.729 7.219-7.975 7.219-14 0-0.677-0.037-1.345-0.109-2h-27.783c-0.072 0.655-0.109 1.323-0.109 2 0 6.025 2.914 11.271 7.219 14-4.305 2.729-7.219 7.975-7.219 14 0 0.677 0.037 1.345 0.109 2h27.783c0.072-0.655 0.109-1.323 0.109-2 0-6.025-2.914-11.271-7.219-14zM5 30c0-5.841 2.505-10.794 7-12.428v-3.143c-4.495-1.634-7-6.587-7-12.428v0h22c0 5.841-2.505 10.794-7 12.428v3.143c4.495 1.634 7 6.587 7 12.428h-22zM19.363 20.925c-2.239-1.27-2.363-2.918-2.363-3.918v-2.007c0-1 0.119-2.654 2.367-3.927 1.203-0.699 2.244-1.761 3.033-3.073h-12.799c0.79 1.313 1.832 2.376 3.036 3.075 2.239 1.27 2.363 2.918 2.363 3.918v2.007c0 1-0.119 2.654-2.367 3.927-2.269 1.318-3.961 3.928-4.472 7.073h15.677c-0.511-3.147-2.204-5.758-4.475-7.075z"></path>
        </g>
        <g id="icon-key">
            <path class="path1" d="M22 0c-5.523 0-10 4.477-10 10 0 0.626 0.058 1.238 0.168 1.832l-12.168 12.168v6c0 1.105 0.895 2 2 2h2v-2h4v-4h4v-4h4l2.595-2.595c1.063 0.385 2.209 0.595 3.405 0.595 5.523 0 10-4.477 10-10s-4.477-10-10-10zM24.996 10.004c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"></path>
        </g>
        <g id="icon-cog">
            <path class="path1" d="M29.181 19.070c-1.679-2.908-0.669-6.634 2.255-8.328l-3.145-5.447c-0.898 0.527-1.943 0.829-3.058 0.829-3.361 0-6.085-2.742-6.085-6.125h-6.289c0.008 1.044-0.252 2.103-0.811 3.070-1.679 2.908-5.411 3.897-8.339 2.211l-3.144 5.447c0.905 0.515 1.689 1.268 2.246 2.234 1.676 2.903 0.672 6.623-2.241 8.319l3.145 5.447c0.895-0.522 1.935-0.82 3.044-0.82 3.35 0 6.067 2.725 6.084 6.092h6.289c-0.003-1.034 0.259-2.080 0.811-3.038 1.676-2.903 5.399-3.894 8.325-2.219l3.145-5.447c-0.899-0.515-1.678-1.266-2.232-2.226zM16 22.479c-3.578 0-6.479-2.901-6.479-6.479 0-3.578 2.901-6.479 6.479-6.479 3.578 0 6.479 2.901 6.479 6.479-0 3.578-2.901 6.479-6.479 6.479z"></path>
        </g>
        <g id="icon-glass">
            <path class="path1" d="M19 12c-1 1-1 1-1 2v14h4c1.105 0 2 0.895 2 2h-16c0-1.105 0.895-2 2-2h4v-14c0-1 0-1-1-2l-8.586-8.586c-0.778-0.778-0.514-1.414 0.586-1.414h22c1.1 0 1.364 0.636 0.586 1.414l-8.585 8.585c-0 0-0 0-0 0z"></path>
        </g>
        <g id="icon-mug">
            <path class="path1" d="M26 10h-2v-3c0-2.761-5.373-5-12-5-6.627 0-12 2.239-12 5v18c0 2.761 5.373 5 12 5s12-2.239 12-5v-3h2c3.3 0 6-2.7 6-6s-2.7-6-6-6zM5.502 5.925c1.811-0.597 4.118-0.925 6.498-0.925s4.688 0.329 6.498 0.925c1.156 0.381 1.857 0.789 2.232 1.075-0.375 0.286-1.076 0.694-2.232 1.075-1.811 0.597-4.118 0.925-6.498 0.925s-4.688-0.329-6.498-0.925c-1.156-0.381-1.857-0.789-2.232-1.075 0.375-0.286 1.075-0.694 2.232-1.075zM28.261 17.761c-0.276 0.276-0.872 0.739-1.761 0.739h-2.5v-5h2.5c0.89 0 1.486 0.463 1.761 0.739s0.739 0.871 0.739 1.761-0.463 1.486-0.739 1.761z"></path>
        </g>
        <g id="icon-food">
            <path class="path1" d="M27 0c-2.762 0-5 2.239-5 5v15h4v12h6v-27c0-2.761-2.239-5-5-5zM13 0c-0.552 0-1 0.448-1 1v7c0 0.276-0.448 0.5-1 0.5-0.552 0-1-0.224-1-0.5v-7c0-0.552-0.448-1-1-1-0.552 0-1 0.448-1 1v7c0 0.276-0.448 0.5-1 0.5-0.552 0-1-0.224-1-0.5v-7c0-0.552-0.448-1-1-1-0.552 0-1 0.448-1 1v7c0 0.276-0.448 0.5-1 0.5s-1-0.224-1-0.5v-7c0-0.552-0.448-1-1-1s-1 0.448-1 1v9c0 0.885 0.783 1.378 1.656 2 1.1 0.783 2.344 1.77 2.344 4v16h6v-16c0-2.23 1.243-3.217 2.344-4 0.873-0.622 1.656-1.115 1.656-2v-9c0-0.552-0.448-1-1-1z"></path>
        </g>
        <g id="icon-tree">
            <path class="path1" d="M30.5 24h-0.5v-6.5c0-1.93-1.57-3.5-3.5-3.5h-8.5v-4h0.5c0.825 0 1.5-0.675 1.5-1.5v-5c0-0.825-0.675-1.5-1.5-1.5h-5c-0.825 0-1.5 0.675-1.5 1.5v5c0 0.825 0.675 1.5 1.5 1.5h0.5v4h-8.5c-1.93 0-3.5 1.57-3.5 3.5v6.5h-0.5c-0.825 0-1.5 0.675-1.5 1.5v5c0 0.825 0.675 1.5 1.5 1.5h5c0.825 0 1.5-0.675 1.5-1.5v-5c0-0.825-0.675-1.5-1.5-1.5h-0.5v-6h8v6h-0.5c-0.825 0-1.5 0.675-1.5 1.5v5c0 0.825 0.675 1.5 1.5 1.5h5c0.825 0 1.5-0.675 1.5-1.5v-5c0-0.825-0.675-1.5-1.5-1.5h-0.5v-6h8v6h-0.5c-0.825 0-1.5 0.675-1.5 1.5v5c0 0.825 0.675 1.5 1.5 1.5h5c0.825 0 1.5-0.675 1.5-1.5v-5c0-0.825-0.675-1.5-1.5-1.5zM6 30h-4v-4h4v4zM18 30h-4v-4h4v4zM14 8v-4h4v4h-4zM30 30h-4v-4h4v4z"></path>
        </g>
    </defs>
</svg>

<svg class="icon red" viewBox="0 0 32 32"><use xlink:href="#icon-home"></use></svg>
<svg class="icon green" viewBox="0 0 32 32"><use xlink:href="#icon-camera"></use></svg>
<svg class="icon blue" viewBox="0 0 32 32"><use xlink:href="#icon-music"></use></svg>
<svg class="icon " viewBox="0 0 32 32"><use xlink:href="#icon-key"></use></svg>
<svg class="icon " viewBox="0 0 32 32"><use xlink:href="#icon-cog"></use></svg>

CSS

 .icon {
    display: inline-block; 
    width: 32px;
    height: 32px;
    fill: #333;
}

.red {fill: #F00;}
.green {fill: #0F0;}
.blue {fill: #00F;}


         svg{           
            -webkit-box-reflect: below 1px
            -webkit-gradient(linear,
                            center top,
                            center bottom,
                            from(transparent),
                            color-stop(0,transparent),
                            to(rgba(255,255,255,0.5)));
                              text-align: center;

                              margin-bottom: 64px;

        }

希望这对某人有所帮助

问候

标记

Answer 2

您可以使用https://www.google.com/fonts 并从中选择一种字体添加到您的收藏中，并将谷歌返回的href 链接添加到您创建的html 页面。您可以使用 CSS 自定义所需的文本颜色和大小。

html

<link href='http://fonts.googleapis.com/css? family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'><link rel="stylesheet" href="css/main.css">

}