- fontello
- Font Awesome
Last active
March 30, 2023 18:46
-
-
Save rejgan318/06a6bf985607398088f78dbda9cf1396 to your computer and use it in GitHub Desktop.
[web] [icon customize] fontello
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="ru"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<script defer src="js/solid.js"></script> | |
<script defer src="js/fontawesome.js"></script> | |
<title>Кастомизируем иконки Font Awesome</title> | |
</head> | |
<body> | |
<style> | |
.myicon { | |
color: red; | |
font-size: 25px; | |
} | |
.square-icon { | |
border: 1px solid red; | |
border-radius: 0.25em; | |
padding: 0.25em; | |
background-color: rgb(249, 221, 221); | |
color: red; | |
font-size: 0.75em; | |
} | |
</style> | |
<i class="fa-solid fa-house fa-fw square-icon" title="Домой"></i> С текстом подставки | |
<ul style="list-style: none;"> | |
<li><i class="fa-solid fa-beer square-icon"></i> Бомбочка в посылке</li> | |
<li><i class="fa-solid fa-spinner fa-spin" style="color: green;"></i> Спинер</li> | |
<li><i class="fa-solid fa-beer myicon fa-bounce"></i> Красное прыгающее пиво</li> | |
<li><i class="fa-solid fa-heart fa-beat-fade" style="--fa-animation-duration: 0.5s; color: blue;"></i>Наши синие | |
сердца!</li> | |
<li><i class="fa-solid fa-face-grin-wink fa-fade"></i>Улыбка чеширского кота</li> | |
<li> | |
<span class="fa-stack"> | |
<i class="fa-solid fa-circle fa-stack-2x"></i> | |
<i class="fa-solid fa-flag fa-stack-1x fa-inverse" style="color: red;"></i> | |
</span>Две иконки совмещены - круг и флаг, увеличено в 2 раза | |
</li> | |
<li> | |
<span class="fa-layers fa-fw fa-2x" style="background:MistyRose"> | |
<i class="fa-solid fa-envelope"></i> | |
<span class="fa-layers-counter" style="background:Tomato">1,419</span> | |
</span> | |
Тобе письмо! | |
</li> | |
<li><br /> | |
<span class="fa-layers fa-fw"> | |
<span>ХУЙ</span> | |
<i class="fa-solid fa-ban" style="color: red; font-size: 2.5em;"></i> | |
</span> | |
У нас не матюкаются! | |
</li> | |
</ul> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<link rel="stylesheet" href="css/fontello.css"> | |
<link rel="stylesheet" href="css/iconstyles.css"> | |
<title>Кастомизируем иконки после fontello</title> | |
</head> | |
<body> | |
<i class="icon-plus-outline for-folders"></i>Добавить директорию | |
<ul class="ul_zero"> | |
<li><i class="icon-minus for-folders"></i>Дирктория 1</li> | |
<li><i class="icon-minus for-folders"></i>Дирктория 2</li> | |
<li><i class="icon-minus for-folders"></i>Дирктория 3</li> | |
</ul> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> | |
<meta charset="UTF-8"> | |
<style> | |
html { | |
font-size: 100%; | |
-webkit-text-size-adjust: 100%; | |
-ms-text-size-adjust: 100%; | |
} | |
a:focus { | |
outline: thin dotted #333; | |
outline: 5px auto -webkit-focus-ring-color; | |
outline-offset: -2px; | |
} | |
a:hover, | |
a:active { | |
outline: 0; | |
} | |
input { | |
margin: 0; | |
font-size: 100%; | |
vertical-align: middle; | |
*overflow: visible; | |
line-height: normal; | |
} | |
input::-moz-focus-inner { | |
padding: 0; | |
border: 0; | |
} | |
body { | |
margin: 0; | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
font-size: 14px; | |
line-height: 20px; | |
color: #333; | |
background-color: #fff; | |
} | |
a { | |
color: #08c; | |
text-decoration: none; | |
} | |
a:hover { | |
color: #005580; | |
text-decoration: underline; | |
} | |
.row { | |
margin-left: -20px; | |
*zoom: 1; | |
} | |
.row:before, | |
.row:after { | |
display: table; | |
content: ""; | |
line-height: 0; | |
} | |
.row:after { | |
clear: both; | |
} | |
.span3 { | |
float: left; | |
min-height: 1px; | |
margin-left: 20px; | |
width: 220px; | |
} | |
.container { | |
width: 940px; | |
margin-right: auto; | |
margin-left: auto; | |
*zoom: 1; | |
} | |
.container:before, | |
.container:after { | |
display: table; | |
content: ""; | |
line-height: 0; | |
} | |
.container:after { | |
clear: both; | |
} | |
small { | |
font-size: 85%; | |
} | |
h1 { | |
margin: 10px 0; | |
font-family: inherit; | |
font-weight: bold; | |
line-height: 20px; | |
color: inherit; | |
text-rendering: optimizelegibility; | |
line-height: 40px; | |
font-size: 38.5px; | |
} | |
h1 small { | |
font-weight: normal; | |
line-height: 1; | |
color: #999; | |
font-size: 24.5px; | |
} | |
body { | |
margin-top: 90px; | |
} | |
.header { | |
position: fixed; | |
top: 0; | |
left: 50%; | |
margin-left: -480px; | |
background-color: #fff; | |
border-bottom: 1px solid #ddd; | |
padding-top: 10px; | |
z-index: 10; | |
} | |
.footer { | |
color: #ddd; | |
font-size: 12px; | |
text-align: center; | |
margin-top: 20px; | |
} | |
.footer a { | |
color: #ccc; | |
text-decoration: underline; | |
} | |
.the-icons { | |
font-size: 14px; | |
line-height: 24px; | |
} | |
.switch { | |
position: absolute; | |
right: 0; | |
bottom: 10px; | |
color: #666; | |
} | |
.switch input { | |
margin-right: 0.3em; | |
} | |
.codesOn .i-name { | |
display: none; | |
} | |
.codesOn .i-code { | |
display: inline; | |
} | |
.i-code { | |
display: none; | |
} | |
@font-face { | |
font-family: 'fontello'; | |
src: url('./font/fontello.eot?18802720'); | |
src: url('./font/fontello.eot?18802720#iefix') format('embedded-opentype'), | |
url('./font/fontello.woff?18802720') format('woff'), | |
url('./font/fontello.ttf?18802720') format('truetype'), | |
url('./font/fontello.svg?18802720#fontello') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
.demo-icon { | |
font-family: "fontello"; | |
font-style: normal; | |
font-weight: normal; | |
speak: never; | |
display: inline-block; | |
text-decoration: inherit; | |
width: 1em; | |
margin-right: .2em; | |
text-align: center; | |
/* opacity: .8; */ | |
/* For safety - reset parent styles, that can break glyph codes*/ | |
font-variant: normal; | |
text-transform: none; | |
/* fix buttons height, for twitter bootstrap */ | |
line-height: 1em; | |
/* Animation center compensation - margins should be symmetric */ | |
/* remove if not needed */ | |
margin-left: .2em; | |
/* You can be more comfortable with increased icons size */ | |
/* font-size: 120%; */ | |
/* Font smoothing. That was taken from TWBS */ | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
/* Uncomment for 3D effect */ | |
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ | |
} | |
</style> | |
<link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/" + font.fontname + "-ie7.css"><![endif]--> | |
<script> | |
function toggleCodes(on) { | |
var obj = document.getElementById('icons'); | |
if (on) { | |
obj.className += ' codesOn'; | |
} else { | |
obj.className = obj.className.replace(' codesOn', ''); | |
} | |
} | |
</script> | |
</head> | |
<body> | |
<div class="container header"> | |
<h1>fontello <small>font demo</small></h1> | |
<label class="switch"> | |
<input type="checkbox" onclick="toggleCodes(this.checked)">show codes | |
</label> | |
</div> | |
<div class="container" id="icons"> | |
<div class="row"> | |
<div class="span3" title="Code: 0xe800"> | |
<i class="demo-icon icon-beer"></i> <span class="i-name">icon-beer</span><span class="i-code">0xe800</span> | |
</div> | |
<div class="span3" title="Code: 0xe801"> | |
<i class="demo-icon icon-minus"></i> <span class="i-name">icon-minus</span><span class="i-code">0xe801</span> | |
</div> | |
<div class="span3" title="Code: 0xe802"> | |
<i class="demo-icon icon-minus-circled"></i> <span class="i-name">icon-minus-circled</span><span class="i-code">0xe802</span> | |
</div> | |
<div class="span3" title="Code: 0xe803"> | |
<i class="demo-icon icon-minus-outline"></i> <span class="i-name">icon-minus-outline</span><span class="i-code">0xe803</span> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="span3" title="Code: 0xe804"> | |
<i class="demo-icon icon-minus-1"></i> <span class="i-name">icon-minus-1</span><span class="i-code">0xe804</span> | |
</div> | |
<div class="span3" title="Code: 0xe805"> | |
<i class="demo-icon icon-plus"></i> <span class="i-name">icon-plus</span><span class="i-code">0xe805</span> | |
</div> | |
<div class="span3" title="Code: 0xe806"> | |
<i class="demo-icon icon-plus-circled"></i> <span class="i-name">icon-plus-circled</span><span class="i-code">0xe806</span> | |
</div> | |
<div class="span3" title="Code: 0xe807"> | |
<i class="demo-icon icon-plus-outline"></i> <span class="i-name">icon-plus-outline</span><span class="i-code">0xe807</span> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="span3" title="Code: 0xe808"> | |
<i class="demo-icon icon-plus-1"></i> <span class="i-name">icon-plus-1</span><span class="i-code">0xe808</span> | |
</div> | |
<div class="span3" title="Code: 0xf0fe"> | |
<i class="demo-icon icon-plus-squared"></i> <span class="i-name">icon-plus-squared</span><span class="i-code">0xf0fe</span> | |
</div> | |
<div class="span3" title="Code: 0xf146"> | |
<i class="demo-icon icon-minus-squared"></i> <span class="i-name">icon-minus-squared</span><span class="i-code">0xf146</span> | |
</div> | |
<div class="span3" title="Code: 0xf147"> | |
<i class="demo-icon icon-minus-squared-alt"></i> <span class="i-name">icon-minus-squared-alt</span><span class="i-code">0xf147</span> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="span3" title="Code: 0xf271"> | |
<i class="demo-icon icon-calendar-plus-o"></i> <span class="i-name">icon-calendar-plus-o</span><span class="i-code">0xf271</span> | |
</div> | |
<div class="span3" title="Code: 0xf272"> | |
<i class="demo-icon icon-calendar-minus-o"></i> <span class="i-name">icon-calendar-minus-o</span><span class="i-code">0xf272</span> | |
</div> | |
</div> | |
</div> | |
<div class="container footer">Generated by <a href="https://fontello.com">fontello.com</a></div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
li .for-folders { | |
/* font-size: 25px; */ | |
color: rgb(193, 193, 205); | |
} | |
.for-folders:hover { | |
color: blue; | |
} | |
.ul_zero { | |
list-style: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment