Skip to content

Instantly share code, notes, and snippets.

@rejgan318

rejgan318/_README.MD

Last active March 30, 2023 18:46
Show Gist options
  • Save rejgan318/06a6bf985607398088f78dbda9cf1396 to your computer and use it in GitHub Desktop.
Save rejgan318/06a6bf985607398088f78dbda9cf1396 to your computer and use it in GitHub Desktop.
Download ZIP
[web] [icon customize] fontello
Raw
_README.MD

Кастомизазия иконок

  • fontello
  • Font Awesome
Raw
customicon_Font_Awesome.html
<!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>&nbsp;&nbsp;&nbsp;&nbsp;
У нас не матюкаются!
</li>
</ul>
</body>
</html>
Raw
customicon_fontello.html
<!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>
Raw
demo_fontello.html
<!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">&#xe800;</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">&#xe801;</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">&#xe802;</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">&#xe803;</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">&#xe804;</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">&#xe805;</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">&#xe806;</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">&#xe807;</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">&#xe808;</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">&#xf0fe;</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">&#xf146;</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">&#xf147;</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">&#xf271;</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">&#xf272;</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>
Raw
iconstyles.css
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