Question

Framework7在其示例佈局中使用了SVG圖標，如here。

這裏是他們的代碼的第一個圖標：

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？如何找到其他圖標的鏈接，以便我可以替換現有的圖標？

Answer 1

取出要轉換爲數據URI的SVG。然後：

1. 刪除所有換行符（如果你選擇不必要的空格）
2. 用單引號
3. 更換任何哈希（「＃」）字符％23
4. 前面加上字符串替換任何雙引號data:image/svg+xml;charset=utf-8,

這應該是您想要轉換的大多數SVG需要做的所有事情。如果您的SVG非常大（字符方式），您可能會遇到麻煩。

Answer 2

一步一步的答案可以幫助你。

1. 使用Inkscape或Illustrator工具仔細編碼SVG，可能會有幫助。儘量減少代碼對於低端或舊設備的性能至關重要;
2. 正確編碼您的CSS以在框架中工作（I.E .:添加所有適當的選擇器並交叉檢查CSS和HTML）;
3. 對於參數background-image:url()和'使用"來表示SVG屬性的參數;
4. 使用正確的數據URI（this may be of help）。

我爲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>"); 
    } 

Answer 3

根據我的理解，您要查找的是某種Framework7圖標的文檔。目前，Framework7沒有任何包含的圖標包，只有一些基本的圖標在這些示例中使用。

我看了看周圍的自己，似乎你必須使用第三方圖標集，如Font Awesome。如果你正在尋找類似iOS的圖標，你也可以試試Flaticons的iOS7 Set Lined 1。

編輯： Framework7現在有自己的iOS圖標字體在GitHub。文檔是over here。強烈建議檢查（並且它是免費的/ MIT許可的！）。