0

Framework7 在他们的示例布局中使用 SVG 图标，例如这里。

这是他们第一个图标的代码：

i.tabbar-demo-icon-1 {
  width: 30px;
  height: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='%23929292'><g><circle cx='15.2' cy='8.8' r='1.5'/><polygon points='16.7,12.3 16.7,11.7 16.7,11.3 13.7,11.3 13.7,12.3 14.7,12.3 14.7,20.3 13.7,20.3 13.7,21.3 17.7,21.3 17.7,20.3 16.7,20.3'/><path d='M15.2,2.3C8.3,2.3,2.7,7.9,2.7,14.8s5.6,12.5,12.5,12.5c6.9,0,12.5-5.6,12.5-12.5S22.1,2.3,15.2,2.3z M15.2,26.3 c-6.3,0-11.5-5.2-11.5-11.5S8.8,3.3,15.2,3.3s11.5,5.2,11.5,11.5S21.5,26.3,15.2,26.3z'/></g></svg>");
}
.active i.tabbar-demo-icon-1 {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 30 30' fill='%23007aff'><path d='M15,2.6C8.1,2.6,2.5,8.2,2.5,15.1C2.5,22,8.1,27.6,15,27.6S27.5,22,27.5,15.1C27.5,8.2,21.9,2.6,15,2.6z M15,7.6 c0.8,0,1.5,0.7,1.5,1.5c0,0.8-0.7,1.5-1.5,1.5c-0.8,0-1.5-0.7-1.5-1.5C13.5,8.3,14.2,7.6,15,7.6z M17.5,21.6h-4v-1h1v-8h-1v-1h3V12 v0.6v8h1V21.6z'/></svg>");
}

他们从哪里获得这些图标的背景图片 URL？如何找到其他图标的链接，以便替换现有图标？

4

3 回答 3

1

根据我的理解，您正在寻找的是某种有关 Framework7 图标的文档。目前，Framework7 没有任何包含的图标包，仅在示例中使用了一些基本图标。

我环顾四周，似乎您必须使用第三方图标集，例如Font Awesome。如果你正在寻找类似 iOS 的图标，你也可以试试Flaticons 的iOS7 Set Lined 1。

编辑： Framework7 现在在GitHub 上 有自己的 iOS 图标字体。文档在这里。强烈建议您查看（并且它是免费/MIT 许可的！）。

于 2016-07-01T13:45:51.220 回答
0

获取要转换为数据 URI 的 SVG。然后：

  1. 删除所有换行符（如果您选择，则删除不必要的空格）
  2. 用单引号替换任何双引号
  3. 用 %23 替换任何哈希 ('#') 字符
  4. 前置字符串data:image/svg+xml;charset=utf-8,

对于要转换的大多数 SVG，这应该是您需要做的所有事情。如果您的 SVG 非常大（字符方面），您可能会遇到麻烦。

于 2016-02-25T18:18:44.913 回答
0

一步一步的回答可以帮助你。

  1. 仔细编码您的 SVG，使用 Inkscape 或 Illustrator 等工具可能会有所帮助。将代码最小化到对低端或旧设备的性能至关重要；
  2. 正确编码您的 CSS 以在框架中工作（即：添加所有到期选择器并交叉检查 CSS 和 HTML）；
  3. 用于SVG 属性的"参数background-image:url()和'参数；
  4. 使用正确的数据 URI（这可能会有所帮助）。

我为 Framework7 添加了一个工作示例，一个橙色的 Youtube 图标。

    i.icon.icon-youtube {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 2.3C.2 2.3 0 3.3 0 10s.2 7.7 10 7.7 10-1 10-7.7-.2-7.7-10-7.7zm3.2 8l-4.5 2c-.4.3-.7 0-.7-.3V8c0-.4.3-.6.7-.4l4.5 2c.4.3.4.6 0 .7z' fill='#ff9800'/></svg>");
    }
于 2016-05-08T16:40:05.310 回答