Difference between revisions of "Joomla Standard Icomoon Fonts/zh-tw"
From Joomla! Documentation
(Created page with "Joomla 標準的 Icomoon 字體") |
(Created page with "本章節未完成") |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 3: | Line 3: | ||
Since Joomla 3.0.0, the Joomla! CMS comes with its own custom [https://icomoon.io/ Icomoon Font Set]. These icon fonts are available by default for use in the "Protostar" (Frontend), "Isis" (Administrator) and "Hathor" (Administrator) Templates. | Since Joomla 3.0.0, the Joomla! CMS comes with its own custom [https://icomoon.io/ Icomoon Font Set]. These icon fonts are available by default for use in the "Protostar" (Frontend), "Isis" (Administrator) and "Hathor" (Administrator) Templates. | ||
| − | == | + | == 如何使用 == |
Icon fonts can be called with a <tt><span class="icon-''name-of-icon''"></tt> tag and a {space}. eg | Icon fonts can be called with a <tt><span class="icon-''name-of-icon''"></tt> tag and a {space}. eg | ||
| Line 24: | Line 24: | ||
Here is the resized Joomla! icon: <span class="icon-joomla" style="font-size:24px;"> </span> | Here is the resized Joomla! icon: <span class="icon-joomla" style="font-size:24px;"> </span> | ||
| − | == | + | == 可以使用的 Icomoon 圖示 == |
This is the complete list, including the alternative names to call the icon. The alternatives are separated by a '/' below. | This is the complete list, including the alternative names to call the icon. The alternatives are separated by a '/' below. | ||
| Line 241: | Line 241: | ||
</div> | </div> | ||
| − | == | + | == 包含到您的佈景主題中 == |
| − | {{note| | + | {{note|本章節未完成}} |
__NOTOC__ | __NOTOC__ | ||
To include the Icomoon fonts in your template you will have to add the css stylesheet (<tt>/media/jui/css/icomoon.css</tt>) or include it in your <tt>.less</tt> file when you generate the <tt>.css</tt> stylesheet(s). | To include the Icomoon fonts in your template you will have to add the css stylesheet (<tt>/media/jui/css/icomoon.css</tt>) or include it in your <tt>.less</tt> file when you generate the <tt>.css</tt> stylesheet(s). | ||
| Line 252: | Line 252: | ||
<noinclude> | <noinclude> | ||
| − | [[Category:CSS]] | + | [[Category:CSS{{#translation:}}]] |
| − | [[Category:Template Development]] | + | [[Category:Template Development{{#translation:}}]] |
</noinclude> | </noinclude> | ||
Latest revision as of 00:12, 22 February 2021
Joomla!
≥ 3.0.0
Since Joomla 3.0.0, the Joomla! CMS comes with its own custom Icomoon Font Set. These icon fonts are available by default for use in the "Protostar" (Frontend), "Isis" (Administrator) and "Hathor" (Administrator) Templates.
如何使用
Icon fonts can be called with a <span class="icon-name-of-icon"> tag and a {space}. eg
<span class="icon-joomla"> </span>
Will show the Joomla! icon:
Font Size
Because the icons are fonts, you can control the size of them with an added class or style= statement. Of course you will have to define the class in your .css or .less stylesheet file.
<span class="icon-joomla large-icon"> </span> <span class="icon-joomla" style="font-size:24px;"> </span>
Here is the resized Joomla! icon:
可以使用的 Icomoon 圖示
This is the complete list, including the alternative names to call the icon. The alternatives are separated by a '/' below.
joomla
address
apply / edit / pencil
archive / drawer-2
arrow-down-2
arrow-down-3
arrow-down-4
arrow-first
arrow-last
arrow-left-2
arrow-left-3
arrow-left-4
arrow-right-2
arrow-right-3
arrow-right-4
arrow-up-2
arrow-up-3
arrow-up-4
attachment / paperclip / flag-2
backward-2 / reply
backward-circle
ban-circle / minus-circle
bars
basket
book
bookmark
bookmark-2
box-add
box-remove
briefcase
broadcast / connection / wifi
brush
calendar
calendar-2
calendar-3
camera
camera-2 / video
cancel-circle
cart
chart
checkbox-partial
checkbox-unchecked
checkedout / lock / locked
checkin / checkbox / checkbox-checked
checkmark-2
checkmark-circle
chevron-down / downarrow / arrow-down
chevron-left / leftarrow / arrow-left
chevron-right / rightarrow / arrow-right
chevron-up / uparrow / arrow-up
circle
clock
cogs
comment / comments
comments-2
compass
contract
contract-2
credit
credit-2
cube
dashboard
database
delete / remove / cancel-2
download
enter
envelope / mail
envelope-opened / mail-2
equalizer
exit
expand
expand-2
expired
eye-close / eye-blocked / eye-2
eye-open / eye
featured / default / star
feed
file
file-2
file-add / file-plus
file-check
file-minus
file-remove
filter
first
flag
flag-3
folder-3
folder-close / folder-2
folder-minus
folder-open / folder
folder-plus
folder-plus-2
folder-remove
forward-2
forward-circle
grid / grid-view
grid-2 / grid-view-2
health
heart
heart-2
home
home-2
info
info-2 / info-circle
key
lamp
last
lightning / flash
link
list / list-view
list-2
location
loop
menu
menu-2
menu-3
minus / not-ok
minus-sign / minus-2
mobile
move
music
new / plus
next / forward
notification
notification-2 / notification-circle
options / cog
out-2 / new-tab
out-3 / new-tab-2
palette / color-palette
paragraph-center
paragraph-justify
paragraph-left
paragraph-right
pause
pause-circle
pencil-2
pending / warning
phone
phone-2
picture / image
pictures / images
pie
pin / pushpin
play
play-2 / video-2 / youtube
play-circle
plus-circle
power-cord
previous / backward
print / printer
publish / save / ok / checkmark
purge / trash
puzzle
question / question-sign / help
question-2 / question-circle
quote / quotes-left
quote-2 / quotes-right
quote-3 / bubble-quote
radio-checked / generic
radio-unchecked
save-copy / copy
save-new / plus-2
scissors
screen
screwdriver / tools
search
share / redo
share-alt / out
shield
shuffle
signup
smiley / smiley-happy
smiley-2 / smiley-happy-2
smiley-neutral
smiley-neutral-2
smiley-sad
smiley-sad-2
square
stack
star-2
stop
stop-circle
support
switch
tablet
tag
tag-2
tags
tags-2
thumbs-down
thumbs-up
tree
tree-2
unarchive / drawer
unblock / refresh / redo-2
undo
undo-2
unfeatured / asterisk / star-empty
unlock
unpublish / cancel
upload
user
users
vcard
wand
warning-2 / warning-circle
wrench
zoom-in
zoom-out
包含到您的佈景主題中
本章節未完成
To include the Icomoon fonts in your template you will have to add the css stylesheet (/media/jui/css/icomoon.css) or include it in your .less file when you generate the .css stylesheet(s).
$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl.'/media/jui/css/icomoon.css');