ดาวน์โหลด picon - ดาวน์โหลดซอร์สโค้ด picon

picon

ดาวน์โหลดแบบอักษร

v21.12.05

ดาวน์โหลด

ชุด pico-icon

ดาวน์โหลด | Icon Finder | การสาธิตสีธง | บรรณาธิการ

~ 900 ไอคอน Libre ที่ปล่อยออกมาเป็นตัวอักษร ligatured, SVG, PNG และ JSON ICOMOON Project เปรียบเทียบ
Hackable: อัปเดตหรือลบ SVG ใด ๆ จากนั้นสร้างใหม่ด้วย make all ! คุณยังสามารถใช้ iComoon (ไม่สามารถจัดการกับการระบายสี)
น้ำหนักเบา: SVG โดยเฉลี่ยเบากว่า 5x Fontawesome แหล่งที่มา
ออกแบบบน 8 กริด: สามารถอ่านได้ที่ 8px 16px 24px 32px 48px ... การสาธิต
องค์ประกอบไอคอนนับพันเป็นไปได้
CDN ได้รับการสนับสนุนผ่าน unpkg.com และ jsdelivr.net
การรองรับหลากสี! ตัวอย่าง

การใช้งาน

เคล็ดลับ: แทนที่ solid ด้วยไอคอนที่คุณต้องการ (เช่น: flags )

 <!-- SVG: for casual usage -->
< img src =" //unpkg.com/picon/solid/app.svg " alt =" app " >

<!-- Sprites: for massive usage -->
< svg > < use xlink:href =" //unpkg.com/picon/solid.svg#app " > </ use > </ svg >

<!-- Font: for ligature junky -->
< style >
@font-face {
  src: url(https://unpkg.com/picon);
  font-family: picon;
}
.picon { font-family: picon; }
</ style >

< span class = picon > app </ span >

เคล็ดลับ: ใช้ URL CDN ที่มีรุ่นเสมอ (เช่น: https://unpkg.com/[email protected]/solid/... ) สำหรับการผลิต

การบูรณาการ mardown

หากคุณไม่ต้องการคุณสมบัติ ~~strikeout~~ mardown คุณสามารถสร้างกฎเพื่อแสดงข้อความที่นัดเป็นไอคอน:

 del , s {
	font-family : picon; 
	text-decoration : none;
}

การสาธิตสด

องค์ประกอบ

เพื่อให้มีน้ำหนักเบา Picon ไม่ได้ให้ไอคอนที่แต่งขึ้นเช่น call-in call-out call-forward

ติดตามตัวอย่าง Mardown <del> ก่อนหน้านี้คุณสามารถเขียนโดยใช้:

 < style >
del {
	font-family: picon;
	word-spacing: -2em; /* Same size overlay */
	text-decoration: none; /* un-strike */
	text-shadow:/* white halo */
	-1px -1px 0 white,
	-1px -0px 0 white,
	-1px  1px 0 white,
	-0px -1px 0 white,
	-0px -0px 0 white,
	-0px  1px 0 white,
	 1px -1px 0 white,
	 1px -0px 0 white,
	 1px  1px 0 white;
}
del>sup,del>sub{
	font-size: .5em; /* twice smaller */
	margin-left: -1em; /* right side*/
}
del>sup{vertical-align:text-top;}
del>sub{vertical-align:text-bottom;}
</ style >

หมายเหตุ: แทนที่ del ด้วย s หรือ .picon ตามโปรเซสเซอร์ mardown ของคุณ

ตอนนี้คุณสามารถเชื่อมโยงผู้ปกครองใด ๆ กับไอคอนลูกใดก็ได้:

 < del > microphone not </ del >
< del > wifi4 < sub > ! </ sub > </ del >
< del > printer < sub > magnifier </ sub > </ del >
< del > bluetooth < sub > add </ sub > </ del >
< del > gsm0 < sub > chain </ sub > </ del >
< del > wifi4 < sub > 5g </ sub > </ del >
< del > lock < sub > warning </ sub > </ del >
< del > file < sub > attachment </ sub > </ del >
< del > calendar < sub > add </ sub > </ del >
< del > battery < sub > bolt </ sub > </ del >
< del > file < sub > markdown </ sub > </ del >
< del > call < sup > rightward </ sup > </ del >
< del > drive < sub > wrench </ sub > </ del >
< del > screen < sub > colors </ sub > </ del >
< del > picture < sub > contrast </ sub > </ del >

การสาธิตสด

องค์ประกอบข้อความ HTML

ตรงข้ามกับ SVG ตัวอักษร ligatured สามารถใช้ในองค์ประกอบแบบข้อความเท่านั้น ( <option> , <input> ... ):

 < input type = reset class = picon value = cross >

< select >
	< optgroup label = iconless >
		< option > wifi0
	</ optgroup >
	< optgroup class = picon label =" wifi0 " >
		< option > wifi0
		< option > wifi4
	</ optgroup >
</ select >

การสาธิตสด

เทียม

แบบอักษรสามารถตอบสนองจากรัฐและคุณลักษณะ

ตัวอย่างเช่นสามารถแสดงไอคอนภาษาที่สอดคล้องกันโดยอัตโนมัติไปยังองค์ประกอบ <pre> :

 < pre lang = js >
function example(){
	return 0;
}
</ pre >

< style >
pre[lang]::before{
	font-family: picon;
	content: attr(lang);
	float: right;
}
</ style >

การสาธิตสด

นอกจากนี้ยังสามารถช่วยในการรวมสไตล์เบราว์เซอร์สำหรับอินพุต typefile/ช่องทำเครื่องหมาย/วิทยุ:

 < input type = file data-before = file style = width:1em >
< input type = checkbox data-before = ballot data-before-checked = checked style = appearance:none >
< input type = radio data-before = false data-before-checked = true style = appearance:none >
< style >
[data-before]::before{
	font-family: picon;
	content: attr(data-before);
}
[data-before-checked]:checked::before{
	font-family: picon;
	content: attr(data-before-checked);
}
</ style >

การสาธิตสด

การไล่ระดับสี

 < style >
.rainbow{
	background: linear-gradient(
	#5eb544 00.0% 37.5%,
	#f5b226 37.5% 50.0%,
	#ed7e1e 50.0% 62.5%,
	#d9383c 62.5% 75.0%,
	#913b92 75.0% 87.5%,
	#0098d5 87.5% 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
<style>
<input type=search class="picon rainbow">

การสาธิตสด

ความเคลื่อนไหว

เพิ่มสปินเนอร์นาฬิกาทรายลงในปุ่มปิดใช้งานใด ๆ

 < style >
@font-face {
  src: url(https://unpkg.com/picon);
  font-family: picon;
}
@keyframes hourglass {
	0%{content:'hourglass1'}
	10%{content:'hourglass2'}
	20%{content:'hourglass3'}
	30%{content:'hourglass4'}
	40%{content:'hourglass5'}
	50%{content:'hourglass5'}
	60%{content:'hourglass6'}
	70%{content:'hourglass7'}
	80%{content:'hourglass8'}
}
button:disabled::after{
	font-family: picon;
	content: 'hourglass1';
	animation: hourglass 1s infinite;
}
</ style >
< button onclick =" disabled=true " > Upload </ button >