將圖形直接嵌入HTML檔

1a. 【certutil -encode mypicture.png mypicture.txt】 (Win)
1b. 【base64 -i mypicture.png -o mypicture.txt】 (Mac)
1c. 【base64 mypicture.png > mypicture.txt】 (BSD)

2. in HTML, 【<img src="data:image/png;base64,】
Notice that the last character on that line is a comma.
Do not omit that.

If your image is in the JPEG format (with a ".jpg or ".jpeg" file extension), use "image/jpeg" instead of "image/png". Likewise, if it is a GIF picture (with a ".gif" extension), use "image/gif". This string is technically known as the MIME type, and it tells the browser the type of data that follows.

3. in HTML, Put TXT image after 2

4. in HTML, 【">】 for the end

==

利用CSS定義功能、讓嵌入圖形可重覆使用

1.用<style type="text/css">【定義內容】</style>

2.定義內容範例：

span.word-icon::before {
content: url(data:image/gif;base64,R0lGODlhP..............);}

3.上例定義出一新的span class名為【word-icon】，使用此span class會在其之前(before)放入內容物(content)之定義圖形

4.呼叫語法【<span class="word-icon"></span>】，即可叫出圖形
==

範例

Paragraph with icon.