內容簡介
這個外掛程式的 525icons CSS 檔案和字型檔都是托管在 jsDelivr CDN 上,因此這個外掛非常快速和輕量。
您可以在 https://525icons.com/glyphs.html 找到您需要的圖示名稱。
在那裡,您可以點選任何圖示,將其名稱複製到剪貼簿中。前綴‘ico-‘ 將被省略,因為您只需要使用簡碼中的名稱。
簡碼語法: [ico iname=?]
注意!如果您需要‘ico-twitter’的話,請寫成‘twitter’。
例如:[ico iname=’twitter’] 或 [ico iname=twitter]
所生成的 HTML 如下:
<i class='ux ico-twitter'></i>
這就是顯示圖示所需的代碼。
您可以包含以下的可選參數,這些參數將添加內嵌樣式到 HTML 代碼中:
[ico isize=? iborder=? ibordercol=? iradius=? ipadding=? imargin=? icolor=? ibg=? ivalign=?]
isize = 字型大小 (必須加上:px、em、rem、pt、%、x-large、large、small 等)
iborder = 邊框大小 (以 px 指定,僅輸入數字)
ibordercol = 邊框顏色 (#HEX、RGB、RGBA、標準網頁顏色名稱等)
iradius = 邊框半徑 (以 px 指定,只輸入數字)
ipadding = 內邊距 (以 px 指定,僅輸入數字)
imargin = 邊距 (以 px 指定,僅輸入數字)
icolor = 顏色 (#HEX、RGB、RGBA、標準網頁顏色名稱等)
ibg = 背景顏色 (#HEX、RGB、RGBA、標準網頁顏色名稱等)
ivalign = 垂直對齊 (以 % 指定,只輸入數字)
所有選擇器的預設值都是「空白」,除了:border-radius=’0′ 和 border-color=’black’。
(僅使用 [ico] 簡碼時,會生成預設圖示,其設置為 ‘ico-wordpress’。預設大小繼承自頁面 CSS。)
進階選項:
除了主要的 CSS 檔案 ‘525icons.min.css’,此外,此外掛還會使用文件 ‘css/styles.css’,
這裡有一組常見的 HTML 顏色名稱類別,以及一些大小類別。
類別 ‘ispin’ 會讓圖示無限旋轉,可用於旋轉和刷新圖示。
關於類別和內嵌樣式:
此簡碼:
[ico iname=twitter icolor=darkblue isize=24px]
會生成如下的內嵌樣式:
<i class='ux ico-twitter' style='font-size:24px;color:darkblue'></i>
而此簡碼:
[ico iname=’twitter darkblue xl’]
則會生成一下 HTML 代碼,呼叫 CSS 檔案中的類別名稱:
<i class='ux ico-twitter darkblue xl'></i>
如果您使用其他類別,則必須在 ‘iname’ 之後添加它們(它們必須在引號內,並在它們之間加上空格)。
例如,如果您要使用指向上的箭頭,請使用 ‘rotate90’:
[ico iname=’circle-arrow rotate90’]
旋轉類別對於箭頭和媒體播放器圖示非常有用。請查看 https://525icons.com/examples.html
請參考 ‘css/styles.css’ 和 https://525icons.com/fonts/525icons.css,了解更多的樣式選項。
以下是一些可用的樣式類別:
大小類別:
.lg (字型大小: 1.33333333em)
.xl (字型大小: 24px)
.i2x (字型大小: 32px)
.i3x (字型大小: 48px)
.i4x (字型大小: 64px)
.i5x (字型大小: 80px)
.i6x (字型大小: 96px)
.i7x (字型大小: ...
外掛標籤
開發者團隊
原文外掛簡介
The 525icons css-file and font files are hosted at jsDelivr CDN, so this plugin is fast and lightweight.
Find the names of your desired icons at https://525icons.com/glyphs.html.
There you may click on any icon to copy its name to the clipboard. The ‘ico-‘ prefix is omitted, as you need only the name for the shortcode.
Shortcode syntax: [ico iname=?]
Notice! Write ‘twitter’ if you want ‘ico-twitter’.
eg.: [ico iname=’twitter’] or [ico iname=twitter]
Generated HTML will be:
which is the code needed to show the icon on the page.
You may include following optional parameters, which will add inline styles to the HTML code:
[ico isize=? iborder=? ibordercol=? iradius=? ipadding=? imargin=? icolor=? ibg=? ivalign=?]
isize = font-size (you must add: px, em, rem, pt, %, x-large, large, small etc.)
iborder = border-size (specified as px, write number only)
ibordercol = border-color (#HEX, RGB, RGBA, standard web color name, etc.)
iradius = border-radius (specified as px, write number only)
ipadding = padding (specified as px, write number only)
imargin = margin (specified as px, write number only)
icolor = color (#HEX, RGB, RGBA, standard web color name, etc.)
ibg = background-color (#HEX, RGB, RGBA, standard web color name, etc.)
ivalign = vertical-align (specified as %, write number only)
Default values for all selectors are ’empty’, except: border-radius=’0′ and: border-color=’black’.
(The shortcode [ico] alone will generate a default icon, which is set to the ‘ico-wordpress’. The default size is inherited from the page css.)
Advanced options:
In addition to the main css file, ‘525icons.min.css’, the plugin utilizes the file ‘css/styles.css’,
where there is a set of classes with standard HTML color names, plus some size classes.
The class ‘ispin’, makes the icon spin infinitely, usable for spin and refresh icons.
About classes and inline styles:
This shortcode:
[ico iname=twitter icolor=darkblue isize=24px]
will generate inline styles like:
while this shortcode:
[ico iname=’twitter darkblue xl’]
will generate following HTML-code, calling up classnames in the css files:
If you use additional classes, you must add them after ‘iname’ (and they must be inside the iname apostrophes – with space between them).
For example, if you want an arrow pointing upwards, use ‘rotate90’:
[ico iname=’circle-arrow rotate90′]
The rotate classes are useful for arrows and mediaplayer icons. Check out: https://525icons.com/examples.html
Take a look at ‘css/styles.css’ and https://525icons.com/fonts/525icons.css, for more styling options.
Here are some of the available style classes:
Size classes:
.lg (font-size: 1.33333333em)
.xl (font-size: 24px)
.i2x (font-size: 32px)
.i3x (font-size: 48px)
.i4x (font-size: 64px)
.i5x (font-size: 80px)
.i6x (font-size: 96px)
.i7x (font-size: 112px)
.i8x (font-size: 128px)
.i9x (font-size: 144px)
.i10x (font-size: 160px)
Border radius (set as px):
.radius6
.radius8
.radius12
.radius36
Rotate classes:
.rotate45
.rotate90
.rotate135
.rotate180
.rotate225
.rotate270
.rotate315
You may choose to write HTML code instead of shortcodes, like this:
