84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
项目需求,这种必须用iconfont做,不能切图,我只会弄纯色也就是单一颜色的图标,请问这种两种或两种以上颜色的,用iconfont如何实现?
闭关修行中......
接3楼的方法(你的理论是正确的):
.icon:before { content: 'font-a'; color: #f00; } .icon:after { content: 'font-b'; color: #00f; letter-spacing: -1em; }
参考:stackicons.com,pixelambacht.nl另外:icomoon.io有单图标多色彩的,但不知道是怎么处理的(可能跟透明度有关,只能简单多色)。
iconfont是用字体文件取代图片文件,以文本形式来展示图标、特殊字体等。好处是矢量化,可以任意缩放,可以任意改颜色。有得必有失,在呈现复杂结构和色彩上,就明显不行了。这种图标,老老实实用图片吧。
其他答案里有写到,iconmoon拥有单文本多色彩的,试验了一下,应该是用网点线条模拟了图标部分区域的透明度实现的。
至于多个ico叠加实现多色,把一个原本简单的问题复杂化。做为研究技术是很好的,用于生产环境效率就低了。
iconfont 是用的字体来做的, 需要设计师把图片转成 SVG, 再用工具生成字体. Gulp 下SVG 转字体可用工具: https://www.npmjs.com/package...
用图标字体的话也可以 (理论上)
放好多叠加在一起的字符,各自设定为相应的颜色就好了
接3楼的方法(你的理论是正确的):
参考:stackicons.com,pixelambacht.nl
![](http://img.php.cn/upload/image/000/000/000/0e1d015d68ad024e9ec682f788872d5d-0.png)
另外:icomoon.io有单图标多色彩的,但不知道是怎么处理的(可能跟透明度有关,只能简单多色)。
iconfont是用字体文件取代图片文件,以文本形式来展示图标、特殊字体等。
好处是矢量化,可以任意缩放,可以任意改颜色。
有得必有失,在呈现复杂结构和色彩上,就明显不行了。
这种图标,老老实实用图片吧。
其他答案里有写到,iconmoon拥有单文本多色彩的,试验了一下,应该是用网点线条模拟了图标部分区域的透明度实现的。
至于多个ico叠加实现多色,把一个原本简单的问题复杂化。做为研究技术是很好的,用于生产环境效率就低了。
iconfont 是用的字体来做的, 需要设计师把图片转成 SVG, 再用工具生成字体. Gulp 下SVG 转字体可用工具: https://www.npmjs.com/package...
用图标字体的话也可以 (理论上)
放好多叠加在一起的字符,各自设定为相应的颜色就好了