Icon տառատեսակներ

Բարև Ձեզ, հարգելի՛ ընթերցող։ Տեսնելով, թե ինչքան կարևոր և օգտակար դեր ունեցան Ձեզ համար իմ նախորդ գրառումները, ես այս անգամ որոշեցի Ձեզ ներկայացնել մի շատ հետաքրքիր թեմա, որն անպայման Ձեզ կօգնի շատ ու շատ հարցերում։ Խոսքը գնում է icon տառատեսակների մասին։ Ի՞նչ է այն իրենից ներկայացնում։ Տառատեսակ արտահայտությունը մեզ մոտ նախ ասոցացվում է սովորական տառերի հետ, որոնք մենք օգտագործում ենք բառեր և արտահայտություններ գրելու համար։ Այդպիսի տեռատեսակներն օգտագործում ենք մեր տեքստին մեր նախընտրած ձեավորումը տալու համար։ Օրինակ․

body{ font-family: Tahoma, Geneva, sans-serif; }

և այլ նմանատիպ տառատեսակներ։ Սակայն icon տառատեսակների միջոցով մենք կարող ենք ստանալ ոչ թե տառեր, այլ տարբեր տեսակի նկարներ (պատկերներ):

Կարևորությունն ու առավելությունը

Շատ դեպքերում նպատակահարմար է որևէ արտահայտության կողքին տեղադրել դրան համապատասխան ինչ-որ նշան, օրինակ՝  եթե ինչ-որ գրառման վերևում պետք է նշել նրա հեղինակի անունը, ավելի գեղեցիկ կլինի, եթե այդ անվան դիմաց տեղադրենք համապատասխան մի նշան։  Այս դեպքում հիանալի լուծում կարող է հանդիսանալ նման տառատեսակի օգտագործումը։ Մինչև icon տառատեսակների ի հայտ գալը այսպիսի հարցերը լուծվում էին փոքր չափերի նկարներ տեղադրելով։ Սակայն այս մեթոդն այնքան էլ նպատակահարմար չէ մի քանի կարևոր պատճառներով․

• էջն ամբողջությամբ բեռնելու համար ամեն մի նկարի համար սերվերին կգնա առանձին HTTP հարցում
• նկարների ծավալն ավելի մեծ է քան տառատեսակներինը
• եթե մենք տեղադրել ենք ինչ-որ գույնի նկար, հետագայում չենք կարող փոխել նրա գույնը (իհարկե առանց փոխելու նկարը )

Օգտագործելով icon տառատեսակները, մենք հեշտությամբ կարող ենք շրջանցել վերը նշված անհարմարությունները։ Բավական է CSS – ի միջոցով տալ տառատեսակի չափ և գույն, և մենք կարող ենք այս նշանները հարմարեցնել մեր տեքստի տառերի արտաքին տեսքին։

Օգտագործումը

Icon տառատեսակներից օգտվելը նույնպես շատ հեշտ է և հարմարավետ։ Նախ մեզ անհրաժեշտ է ներբեռնել համապատասխան ֆայլերը, տեղադրել մեր պրոյեկտում, HTML ֆայլին կապել համապատասխան CSS ֆայլը և մեր տեքստի մեջ օգտագործել համապատասխան էլեմենտները՝ համապատասխան CSS կլասսներով, որոնք կարող ենք գտնել պաշտոնական կայքերից։ Տարբեր գրադարաններ օգտագործում են տարբեր էլեմենտներ և կլասսներ։

Մեր այս գրառման մեջ մենք կծանոթանանք icon տառատեսակների  2 բավականին տարածված գրադարանների հետ։

Font Awesome

Ինպե՞ս գրադարանը կապել մեր պրոյեկտին։

Font Awesome – ը բավականին հարմարավետ, հեշտ օգտագործվող և անվճար գրադարան է։ Այս պահի դրությամբ այն համալրված է 605 նշաններով, որոնք պարբերաբար թարմացվում են և ավելացվում նորերը։ Awesome տառատեսակից օգտվելու համար մեզ անհրաժեշտ է այցելել նրանց պաշտոնական կայք, որտեղ մենք կարող ենք ծանոթանալ այս տառատեսակները մեր պրոյեկտին կապելու 2 եղանակների հետ։ Առաջինը՝ գրադարանի ներբեռնումն է մեր համակարգչի մեջ, իսկ երկրորդը՝ առցանց կապելու միջոցը։ Առցանց կապելու համար այցելում ենք Get Started բաժինը, նշում

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

կոդը, տեղադրում մեր HTML կոդի մեջ և այն արդեն կապված է մեր պրոյեկտին։ Իսկ ներբեռնման մեթոդն  օգտագործելու համար սեղմում ենք հենց գլխավոր էջի Download կոճակը,

 

ապաարխիվացնում ներբեռնված font-awesome-xxx.zip (xxx տարբերակի համարն է) ֆայլը, այնտեղից ընտրում fonts և css պանակները, տեղադրում մեր պրոյեկտում, մեր HTML ֆայլի մեջ տեղադրում հետևյալ կոդը

<link rel=”stylesheet” href=”css/font-awesome.min.css”>

և ներբեռնման միջոցով գրադարանը մեր պրոյեկտին կապելը նույնպես կարող ենք համարել իրականացված։

Awesome – ի օգտագործումը

Awesome տառատեսակի նշաններից օգտվելու համար մեզ ընդամենը անհրաժեշտ է մեր կոդի այն հատվածում, որտեղ մեզ պետք է ցուցադրել նշանը, տեղադրել <i></i> էլեմենտը համապատասխան CSS կլասսներով։

<i class="fa fa-check"></i>
<i class="fa fa-calendar"></i>
<i class="fa fa-comment-o"></i>
<i class="fa fa-folder-open"></i>

Այս գրադարանի բոլոր նշաններն անպայման ունեն 2 կլասսներ՝ fa և կոնկրետ նշանին համապատասխանող կլասսը։ Տառատեսակի բոլոր նշանների ցանկը իրենց համապատասխան կլասսներով կարող ենք տեսնել պաշտոնական կայքի Icons բաժնում։

Եկեք կառուցենք մի փոքրիկ փորձնական ընտրացանկ՝ օգտագործելով այս գրադարանի որոշ նշաններ։ Սկզբի համար վերցնենք մի այսպիսի հասարակ ցանկ․

    <nav class="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">Wordpress</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

CSS ֆայլի մեջ ավելացնենք որոշ արտաքին ձևավորման հնարքներ, որոնք մենք քննարկել ենք մեր Հորիզոնական ընտրացանկի (dropdown menu) կառուցում և FlexBox գրառումներում։

       .menu{
            padding: 0 30px;
            background: #1f1a1a;
            font-family: Tahoma, sans-serif;
            font-size: 20px;
        }
        .menu > ul{
            margin: 0; 
            padding: 0;
            list-style: none;
            display: flex;
            justify-content: space-between;
            flex-flow: row wrap;
        }
        .menu > ul > li{
            padding: 0;
            margin: 0;
            flex: 1 1 150px;
        }
        .menu > ul > li > a{
            display: block;
            padding: 30px 0;
            text-decoration: none;
            color: #eee;
            white-space: nowrap;
            text-align: center;
            line-height: 1;
        }
        .menu > ul > li a:hover{
            color: #bbb;
        }

և արդյունքում կունենանք ահա այսպիսի մի ընտրացանկ․

Այժմ մեր ընտրացանկի ամեն մի անդամի դիմաց ավելացնենք իրեն համապատասխան նշանը։ Ինչպես նշեցի վերևում, այդ նշանները գտնելու համար բացենք նշանների ընդհանուր ցանկը և այնտեղ փնտրենք մեզ անհրաժեշտ նշանները։ Եվ այսպես Home կետի համար տրամաբանական կլինի, որ փնտրենք տան նշան։ Ուշադրություն դարձնեմ նաև այն հանգամանքի վրա, որ այս կայքում շատ հարմարավետ է իրականացվում որոնման գործընթացը։ Մոտավորապես իմանալով մեզ անհրաժեշտ նշանի անվանումը անգլերեն լեզվով, կարող ենք գտնել այն։ Որոնման բաժնում գրենք home բառը և անմիջապես կստանանք բոլոր տարբերակները։ Այստեղից, սեղմելով մեր ընտրած տարբերակի վրա, մենք կայցելենք տվյալ նշանի էջը, որտեղ ցուցադրված են այդ նշանի տարբեր չափերը, իսկ դրանից մի քիչ ներքև գրված է այն փոքրիկ կոդի հատվածը, որն անհրաժեշտ է տեղադրել մեր կոդի մեջ՝ անմիջապես Home բառից առաջ․

<i class=”fa fa-home”></i>

Նույն գործողությունը կրկնելով ընտրացանկի մյուս կետերի համար՝ մեր կոդը կունենա հետևյալ տեսքը․

   <nav class="menu">
        <ul>
            <li><a href=""><i class="fa fa-home"></i> Home</a></li>
            <li><a href=""><i class="fa fa-html5"></i> HTML</a></li>
            <li><a href=""><i class="fa fa-css3"></i> CSS</a></li>
            <li><a href=""><i class="fa fa-wordpress"></i> WordPress</a></li>
            <li><a href=""><i class="fa fa-phone"></i> Contact</a></li>
        </ul>
   </nav>

Իսկ մեր ընտրացանկն արդեն կլինի հետևյալ տեսքով

Համաձայնեք, այս կերպ մեր ընտրացանկն ունի ավելի ճոխ տեսք։ Այժմ հենց այս օրինակի վրա տեսնենք վերը նշված առավելություններից ևս մեկը։ Ենթադրենք, մենք ինչ-որ պահից սկսած որոշում ենք, որ մեր ընտրացանկի տառերը պետք է լինեն ավելի մեծ (28px) և ունենան այլ գույն (#25a35f): Մեզ դրա համար բավական է համապատասխան արժեքները տեղադրել CSS ֆայլի մեջ

     .menu > ul > li > a{
            color: #25a35f;
            font-size: 28px;
      }

և ունենալ այն, ինչ ցանկանում ենք jsfiddle.net/ ։

Icomoon

Icon տառատեսակների մյուս գրադարանը, որ ուզում եմ Ձեզ ներկայացնել՝ Icomoon – ն է, որը թերևս, իմ կողմից ամենանախընտրելին է։ Այն ոչ միայն իրենից ներկայացնում է սովորական գրադարան, այլև, կարելի է ասել, գրադարանների համախումբ է։ Նրա միջոցով կարելի է ստանալ նաև վերը նշված Awesome տառատեսակը։ Իր տառատեսակից և Awesome – ից բացի այն ներառում է նաև շատ ու շատ այլ վճարովի և անվճար տառատեսակներ։ Icomoon տառատեսակից օգտվելու ամենագլխավոր առավելություններից կարելի է համարել այն, որ պարտադիր չէ գրադարանն ամբողջությամբ կապել մեր պրոյեկտին՝ նրանից օգտվելու համար։ Այն մեզ հնարավորություն է տալիս ընտրել մեզ պիտանի նշանները և գեներացնել միայն դրանց համար նախատեսված ֆայլեր։ Արդյունքում մենք կարող ենք կրճատել մեր գրադարանի ծավալը գրեթե 90% – ով, ինչը մեծ պրոյեկտների համար զգալի տարբերություն կարող է տալ։

Եվ այսպես, եկեք կոնկրետ օրինակի վրա ծանոթանանք տառատեսակների գեներացմանն ու օգտագործմանը։ Ենթադրենք, մեզ անհրաժեշտ է կառուցել ինչ-որ մի ոչ շատ բարդ գրանցման ձև օգտվողների համար։ Այս անգամ ևս եկեք այն սկզբում կառուցենք առանց նշանների այնուհետև ավելացնենք բոլոր անհրաժեշտ նշանները։ Այն կառեցելու համար մեզ առայժմ բավական է ունենալ հետևյալ HTML

       <div class="form">
          <h2>Registracion form</h2>
           <form action="">
               <p>
                   <label><input type="text" class="input" name="username" placeholder="Username"></label>
               </p>
               <p>
                   <label><input type="password" class="input" name="password" placeholder="Password"></label>
               </p>
               <p>
                   <label><input type="text" class="input" name="phone" placeholder="Phone"></label>
               </p>
               <p>
                   <label><input type="text" class="input" name="email" placeholder="Email"></label>
               </p>
               <p>
                   <label><input type="text" class="input" name="facebook" placeholder="Facebook"></label>
               </p>
               <p>
                   <button name="submit">Sign Up </button>
               </p>
               
               
           </form>
       </div>

և արտաքին ձևավորումն ապահովող այս CSS

       .form{
            font-family: sans-serif;
            color: #412fcb;
            width: 40%;
            margin: 10px auto;
            border: 1px solid #ccc;
            border-radius: 10px;
            padding: 50px;
            text-align: center;
            font-size: 20px;
        }
        form > p  .input{            
            padding: 10px;
            border-radius: 0px 10px 10px 0;
            font-size: 20px;
            border: 1px solid #ccc;
            height: 30px;
            vertical-align: top;
        }
        form > p  input[type=text]:focus{
            outline: none;
        }
        
        form > p  button{
            font-size: 20px;
            border: none;
            padding: 10px 20px;
            color: #fff;
            background: #412fcb;
            border-radius: 10px;
        }
        form > p  input[type=submit]:active,
        form > p  input[type=submit]:focus{
            outline: none;
        }

կոդերը։ Այժմ “չմոռանանք ինչի համար ենք հավաքվել” և մեր բոլոր դաշտերը (input – ները) համալրենք համապատասխան Icomoon նշաններով։ Ի՞նչ է մեզ պետք դրա համա։ Մեզ նախ անհրաժեշտ է այցելել Icomoon պաշտոնական կայք, այնտեղից, մեզ արդեն հայտնի ձևով որոնել մեզ անհրաժեշտ նշանները։ Username դաշտի համար որոնենք նշաններ, ենթադրենք user  կամ username բառերով։ Մեզ կառաջարկվի բազմազան տարբերակներ, որոնց մեջ կան և՛ վճարովի, և՛ անվճար տարբերակներ։ Այստեղից ընտրենք մեր նախընտրածը՝ մեկ անգամ սեղմելով այդ նշանի վրա։ Հաջորդը մեզ անհրաժեշտ է որոնել նշան գաղտնաբառ դաշտի համար։ Այս անգամ արդեն որոնման բաժնում կգրենք password բառը։ Առաջարկվող տարբերակներից նույն ձևով կընտրենք մեր նախընտրածը և այսպես բոլոր նշանների համար։ Ընտրելով բոլոր նշանները՝ ներքևի բաժնում սեղմենք Generate Fonts և բացված էջում կարող ենք տեսնել մեր ընտրած բոլոր նշանները իրենց կոդերով։ Մինչև դրանց բեռնումը սկսելը, իմ անձնական փորձից խորհուրդ կտամ նշանների CSS կլասսներին ավելացնել Ձեր սեփական նախածանցները՝ հետագայում անախորժություններից խուսափելու համար։ Դրա համար սեղմում ենք նեքևի նշանի վրա, բացված պատուհանի մեջ լրացնում Class Prefix դաշտը` համապատասխան նախածանցով և փակում այն։ Այժմ արդեն կարող ենք գեներացնել և ներբեռնել մեր ընտրած նշանները մեր համակարգչի մեջ։ Ներբեռնումից հետո ապաարխիվացնում ենք icomoon.zip ֆայլը, այնտեղից ընտրում fonts պանակն ու style.css ֆայլը և տեղադրում մեր պրոյեկտի մեջ։ Այժմ մենք ունեցանք միայն մեր պրոյեկտի համար նախատեսված Icon տառատեսակների փոքրիկ գրադարան, որն ունի ընդամենը 20-30 KB ծավալ։ Մեզ մնում է միայն այս գրադարանը կապել մեր պրոյեկտին և մենք կարող ենք լիարժեք օգտվել նրանից։ Իսկ դա իրականացվում է հետևյալ կոդի միջոցով

<link rel=”stylesheet” href=”style.css”>

որը, ինչպես արդեն գիտեք, գրվում է <head> էլեմենտի մեջ։

 Այնուհետև, արդեն ապաարխիվացված ֆայլերի միջից գտնում ենք demo.html – ը և բացում այն դիտարկչով։ Այստեղ ցուցադրվում են բոլոր այն նշանները, որոնք մենք ընտրել էինք գեներացնելու համար։ Իմ դեպքում այն ունի հետևյալ տեսքը․

 

Այս demo.html ֆայլը մեզ պետք է նշանների համապատասխան կլասսները տեսնելու համար։ Նկատենք, որ այստեղ արդեն նշանները դրվում են ոչ թե i էլեմենտի միջոցով, այլ span էլեմենտի միջոցով՝ նրան տալով համապատասխան CSS կլասսները։ Մեր HTML կոդի մեջ ունեցած input էլեմենտների դիմաց, իսկ button էլեմենտի մեջ Sign Up արտահայտությունից հետո ավելացնենք այդ span – ները և նրանց նույնպես տանք որոշ արտաքին ձևավորումներ՝ հետևյալ կոդը մեր ունեցած CSS կոդի մեջ ավելացնելով․

      form > p .input-icon {
            display: inline-block;
            height: 30px;
            color: #412fcb;
            padding: 10px 15px;
            font-size: 25px;
            border: 1px solid #ccc;
            border-radius: 10px 0 0 10px;
            vertical-align: top;
        }

Արդյունքում մենք կունենանք բավականին գեղեցիկ գրանցման ձև՝ օգտագործելով Icomoon տառատեսակը, որի ամբողջական կոդը կարող եք ներբեռնել այստեղից :

Հավանաբար Դուք համոզվեցիք, թե ինչքան հարմարավետ և օգտակար է Icon տառատեսակներից օգտվելը։ Այժմ Դուք ծանոթ եք ամենատարածված 2 գրադարանների հետ և կարող եք ինքներդ որոշել, թե որ գրադարանը կօգտագործեք Ձեր պրոյեկտներում։ Իսկ հարցերի դեպքում չենք մոռանում, որ գոյություն ունեն մեկնաբանությունների բաժին և մեր կայքի վարիչների էլ․փոստերը, որտեղ դուք կարող էք գրել IT ոլորտի Ձեզ հետաքրքրող ցանկացած հարց։

Շնորհակալություն մեր բլոգից օգտվելու համար։ Հարգանքներով IT Blog թիմ։