在程式裡面使用 SVG 檔的好處是,
不會有解析度上的問題,
不管放大縮小都沒有清晰度的問題,
而 IcoMoon 是個線上產生 css 的好工具,
網頁中他有許多 SVG 檔可以提供下載,
點選自己想要的檔案後,
可以編輯圖片大小,旋轉,選擇部分......等等,
編輯後再點選下面的 fonts ,
接下來就可以去設定你所選的圖片,
包括名字,代碼......等等,
設定完後點選 Download,
就可以將 file 整包下載下來囉 !!
使用起來非常方便.
/*------------------------------------------*/
<<css>>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot');
}
@font-face {
font-family: 'icomoon';
src: url( "SVGbase64代碼" );
font-weight: normal;
font-style: normal;
}
[class^=" "], [class*=" "] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Enable Ligatures ================ */
-webkit-font-feature-settings: "liga";
-moz-font-feature-settings: "liga=1";
-moz-font-feature-settings: "liga";
-ms-font-feature-settings: "liga" 1;
-o-font-feature-settings: "liga";
font-feature-settings: "liga";
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
. Tortoise:before {
content: "\e003";
}
. icon_13796:before {
content: "\e004";
}
/*------------------------------------------*/
而在 HTML 檔中只需要引用即可,
<<HTML>>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="testDrive" class=" ">Tortoise
</div>
<div id="testDrive" class=" ">
</div>
</body>
</html>
/*------------------------------------------*/
其中 Tortoise 與  都可以在按下 fonts 之後做設定,
看使用者想要如何表示,
而在選塗的過程中,
沒有你想要的 SVG 圖片,
那麼你可以在左上角選擇 Image button,
將自己想要的 SVG file 上傳喲 !!
/*------------------------------------------*/
那麼你也可以透過 http://webcodertools.com/imagetobase64converter 這網址,
使用也是將 SVG 檔案上傳再轉換,
轉換後將 img , css 代入,
就可以在程式上面看到自己的 SVG file 囉 !!
留言列表
