شرح كامل لعمل خطوط الأيقونات

دائما ما ترى المصممين يبحثون عن أشياء جديدة لإظهار تصاميمهم بحلة جديدة ويقتصر ذلك على مصممي ومطوري المواقع او

المدونات ، يبحثون عن خيارات وادوات من أجل تسريع تصفح الموقع وفي الأونة الأخيرة ظهرت بكثرة مواقع تقدم تسهيلات

لتصميم موقع ومنها الأيقونات وهذا ما سأطرحه ليست أي أيقونات عادية بل ستغنيك عن استخدام الصور بصفة عامة كما تشاهدون

بالمدونة بها ايقونات ليست صور بل على شكل كود مثلا الأيقونات التي بالقائمة الأفقية ، سأقدم لكم أولا بعض المواقع لتي قدم هذه

الخدمة بعدها سأتطرق لشرح الموقع الأول والمستعمل بكثرة

________________________________

Fontello : الموقع يتيح لك إمكانية عمل خط أيقونات خاص بك, بالاعتماد على مصادر من بعض الخطوط مثل: Font Awesome, Entypo, Iconic والكثير من الخطوط ..

Modern Pictograms : من الخطوط المميزة للرسومات التخطيطية وللصفحات الموجهة نحو الطباعة.

Typicons: خط أيقونات قوي أيضا يحتوي على إضافة خاصة بالفوتوشوب

Foundation Icon Fonts : الخط المميز من الموقع الرهيب zurb ,يتيح لك أيضا دروس خاصة

________________________________

* الموقع الذي سنستعمله في الشرح والذي أستعمله ومن معجبيه هو

Font Awesome : الخط الممتاز, وهو أقوى خطوط الأيقونات المستعملة في من طرف المصممين ولديه أكبر نسبة من مستعملين,

حيث تم في البداية تخصيصه للعمل فقط على تويتر بوت ستراب Twitter Bootstarp أما الأن فالكل يستخدمه وتم تطويره وكل

تحديث يتضمن أيقونات جديدة للعلم أنك يمكن التحكم بكل أيقونة من ناحية المقاس واللون والإتجاه كل شيئ لذا لنتابع طريقة عمله ..

شرح طريقة تركيب الإضافة

1. توجه لقالب >> تحرير

2. ابحث بإستعمال Ctrl+F عن </head> :

3. ضع الكود التالي فوقه

* الكود التالي عبارة عن ملف جيكويري يحتوي على جميع الأيقونات

نسخة : 4.0.3

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

4. بعد إضافة الكود تتبقى لنا خطوة التطبيق

* كل كود لديه إسم خاص به للأيقونة مثلا

fa-html5

i class="fa fa-html5"></i> fa-html5>

5. كما تلاحظون في الكود فهو يتحوي على fa اخرى لتعريف الكود وهي ضرورية

6. المرحلة التالية سنرى طريقة تكبير الأيقونات للعلم توجد طريقة أخرى

لتكبير أو تصغير حجم الأيقونة سنضيف القيمة fa-x1

fa-lg, fa-1x, fa-2x, fa-3x,fa-4x, fa-5x

fa-html5

fa-html5

fa-html5

fa-html5

fa-html5

<p><i class="fa fa-html5 fa-lg"></i> fa-html5</p>
<p><i class="fa fa-html5 fa-2x"></i> fa-html5</p>
<p><i class="fa fa-html5 fa-3x"></i> fa-html5</p>
<p><i class="fa fa-html5 fa-4x"></i> fa-html5</p>
<p><i class="fa fa-html5 fa-5x"></i> fa-html5</p>

* أضفناها بعد : fa fa-html5

إذا تسائلتم عن الوسم <p> فهو فقط لإدراج كلمة .. لا يهمنا ما سنستعمله فقط هو <i class="fa fa-html5"></i>

7. في هذه المرحلة سنضيف خاصية تحريك الأيقونة واتي تجعل مثلا دائرة تدور وهي تستخدم فقط لرموز الدائرة مثال :

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>

* أضفنا وسم الرمز مع الأيقونة + رمز لدوران وهو fa-spin

8. المرحلة التالية هي خاصة بالإتجاهات أمثلة :

عادي
إتجاه-90 درجة
أفقي 180 درجة
عمودي على اليمين 270 درجة
أفقي عادي
عمودي عادي

* أضفنا وسم الرمز مع الأيقونة + رمز الإتجاه وهو : fa-rotate

<i class="fa fa-shield"></i>
<i class="fa fa-shield fa-rotate-90">
<i class="fa fa-shield fa-rotate-180">
<i class="fa fa-shield fa-rotate-270">
<i class="fa fa-shield fa-flip-horizontal">
<i class="fa fa-shield fa-flip-vertical">

9. دائما إذا اردت تطبيق الإتجاه أو الدوران أو التكبير كما في المراحل السابقة كل ما عليك إضافته هو الرمز بعد : fa fa-Exempl

ملاحظة كل المراحل السابقة هي لتفهم عمل الأيقونات ولتوضيح وفي الحقيقة قليل ما سنستخدم تلك المراحل لأن الأن سأقدم لك كود

سري لتعامل مع اي أيقونة تابع معي بإستخدام Css :

/* ar1web */ 
.element:before {
    content: "\f000"; 
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--custom  CSS--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}

الحرف مع الرقم بالأصفر خاص بالرمز وهو الذي ستضيفه مكانه والباقي لتحكم في الحجم والإتجاه واللون إلى غير ذلك في السلسلة القادمة هي خاصة بالأيقونات

قائمة الأيقونات مع القيمة لــ Font Awesome 4.0.3 CSS

 fa-glass"\f000"
 fa-music "\f001"
 fa-search"\f002"
 fa-envelope-o"\f003"
 fa-heart"\f004"
 fa-star"\f005"
 fa-star-o"\f006"
 fa-user"\f007"
 fa-film"\f008"
 fa-th-large"\f009"
 fa-th"\f00a"
 fa-th-list"\f00b"
 fa-check"\f00c"
 fa-times"\f00d"
 fa-search-plus"\f00e"
 fa-search-minus"\f010"
 fa-power-off"\f011"
 fa-signal"\f012"
 fa-cog"\f013"
 fa-trash-o"\f014"
 fa-home"\f015"
 fa-file-o"\f016"
 fa-clock-o"\f017"
 fa-road"\f018"
 fa-download"\f019"
 fa-arrow-circle-o-down"\f01a"
 fa-arrow-circle-o-up"\f01b"
 fa-inbox"\f01c"
 fa-play-circle-o"\f01d"
 fa-repeat"\f01e"
 fa-refresh"\f021"
 fa-list-alt"\f022"
 fa-lock"\f023"
 fa-flag"\f024"
 fa-headphones"\f025"
 fa-volume-off"\f026"
 fa-volume-down"\f027"
 fa-volume-up"\f028"
 fa-qrcode"\f029"
 fa-barcode"\f02a"
 fa-tag"\f02b"
 fa-tags"\f02c"
 fa-book"\f02d"
 fa-bookmark"\f02e"
 fa-print"\f02f"
 fa-camera"\f030"
 fa-font"\f031"
 fa-bold"\f032"
 fa-italic"\f033"
 fa-text-height"\f034"
 fa-text-width"\f035"
 fa-align-left"\f036"
 fa-align-center"\f037"
 fa-align-right"\f038"
 fa-align-justify"\f039"
 fa-list"\f03a"
 fa-outdent"\f03b"
 fa-indent"\f03c"
 fa-video-camera"\f03d"
 fa-picture-o"\f03e"
 fa-pencil"\f040"
 fa-map-marker"\f041"
 fa-adjust"\f042"
 fa-tint"\f043"
 fa-pencil-square-o"\f044"
 fa-share-square-o"\f045"
 fa-check-square-o"\f046"
 fa-arrows"\f047"
 fa-step-backward"\f048"
 fa-fast-backward"\f049"
 fa-backward"\f04a"
 fa-play"\f04b"
 fa-pause"\f04c"
 fa-stop"\f04d"
 fa-forward"\f04e"
 fa-fast-forward"\f050"
 fa-step-forward"\f051"
 fa-eject"\f052"
 fa-chevron-left"\f053"
 fa-chevron-right"\f054"
 fa-plus-circle"\f055"
 fa-minus-circle"\f056"
 fa-times-circle"\f057"
 fa-check-circle"\f058"
 fa-question-circle"\f059"
 fa-info-circle"\f05a"
 fa-crosshairs"\f05b"
 fa-times-circle-o"\f05c"
 fa-check-circle-o"\f05d"
 fa-ban"\f05e"
 fa-arrow-left"\f060"
 fa-arrow-right"\f061"
 fa-arrow-up"\f062"
 fa-arrow-down"\f063"
 fa-share"\f064"
 fa-expand"\f065"
 fa-compress"\f066"
 fa-plus"\f067"
 fa-minus"\f068"
 fa-asterisk"\f069"
 fa-exclamation-circle"\f06a"
 fa-gift"\f06b"
 fa-leaf"\f06c"
 fa-fire"\f06d"
 fa-eye"\f06e"
 fa-eye-slash"\f070"
 fa-exclamation-triangle"\f071"
 fa-plane"\f072"
 fa-calendar"\f073"
 fa-random"\f074"
 fa-comment"\f075"
 fa-magnet"\f076"
 fa-chevron-up"\f077"
 fa-chevron-down"\f078"
 fa-retweet"\f079"
 fa-shopping-cart"\f07a"
 fa-folder"\f07b"
 fa-folder-open"\f07c"
 fa-arrows-v"\f07d"
 fa-arrows-h"\f07e"
 fa-bar-chart-o"\f080"
 fa-twitter-square"\f081"
 fa-facebook-square"\f082"
 fa-camera-retro"\f083"
 fa-key"\f084"
 fa-cogs"\f085"
 fa-comments"\f086"
 fa-thumbs-o-up"\f087"
 fa-thumbs-o-down"\f088"
 fa-star-half"\f089"
 fa-heart-o"\f08a"
 fa-sign-out"\f08b"
 fa-linkedin-square"\f08c"
 fa-thumb-tack"\f08d"
 fa-external-link"\f08e"
 fa-sign-in"\f090"
 fa-trophy"\f091"
 fa-github-square"\f092"
 fa-upload"\f093"
 fa-lemon-o"\f094"
 fa-phone"\f095"
 fa-square-o"\f096"
 fa-bookmark-o"\f097"
 fa-phone-square"\f098"
 fa-twitter"\f099"
 fa-facebook"\f09a"
 fa-github"\f09b"
 fa-unlock"\f09c"
 fa-credit-card"\f09d"
 fa-rss"\f09e"
 fa-hdd-o"\f0a0"
 fa-bullhorn"\f0a1"
 fa-bell"\f0f3"
 fa-certificate"\f0a3"
 fa-hand-o-right"\f0a4"
 fa-hand-o-left"\f0a5"
 fa-hand-o-up"\f0a6"
 fa-hand-o-down"\f0a7"
 fa-arrow-circle-left"\f0a8"
 fa-arrow-circle-right"\f0a9"
 fa-arrow-circle-up"\f0aa"
 fa-arrow-circle-down"\f0ab"
 fa-globe"\f0ac"
 fa-wrench"\f0ad"
 fa-tasks"\f0ae"
 fa-filter"\f0b0"
 fa-briefcase"\f0b1"
 fa-arrows-alt"\f0b2"
 fa-users"\f0c0"
 fa-link"\f0c1"
 fa-cloud"\f0c2"
 fa-flask"\f0c3"
 fa-scissors"\f0c4"
 fa-files-o"\f0c5"
 fa-paperclip"\f0c6"
 fa-floppy-o"\f0c7"
 fa-square"\f0c8"
 fa-bars"\f0c9"
 fa-list-ul"\f0ca"
 fa-list-ol"\f0cb"
 fa-strikethrough"\f0cc"
 fa-underline"\f0cd"
 fa-table"\f0ce"
 fa-magic"\f0d0"
 fa-truck"\f0d1"
 fa-pinterest"\f0d2"
 fa-pinterest-square"\f0d3"
 fa-google-plus-square"\f0d4"
 fa-google-plus"\f0d5"
 fa-money"\f0d6"
 fa-caret-down"\f0d7"
 fa-caret-up"\f0d8"
 fa-caret-left"\f0d9"
 fa-caret-right"\f0da"
 fa-columns"\f0db"
 fa-sort"\f0dc"
 fa-sort-asc"\f0dd"
 fa-sort-desc"\f0de"
 fa-envelope"\f0e0"
 fa-linkedin"\f0e1"
 fa-undo"\f0e2"
 fa-gavel"\f0e3"
 fa-tachometer"\f0e4"
 fa-comment-o"\f0e5"
 fa-comments-o"\f0e6"
 fa-bolt"\f0e7"
 fa-sitemap"\f0e8"
 fa-umbrella"\f0e9"
 fa-clipboard"\f0ea"
 fa-lightbulb-o"\f0eb"
 fa-exchange"\f0ec"
 fa-cloud-download"\f0ed"
 fa-cloud-upload"\f0ee"
 fa-user-md"\f0f0"
 fa-stethoscope"\f0f1"
 fa-suitcase"\f0f2"
 fa-bell-o"\f0a2"
 fa-coffee"\f0f4"
 fa-cutlery"\f0f5"
 fa-file-text-o"\f0f6"
 fa-building-o"\f0f7"
 fa-hospital-o"\f0f8"
 fa-ambulance"\f0f9"
 fa-medkit"\f0fa"
 fa-fighter-jet"\f0fb"
 fa-beer"\f0fc"
 fa-h-square"\f0fd"
 fa-plus-square"\f0fe"
 fa-angle-double-left"\f100"
 fa-angle-double-right"\f101"
 fa-angle-double-up"\f102"
 fa-angle-double-down"\f103"
 fa-angle-left"\f104"
 fa-angle-right"\f105"
 fa-angle-up"\f106"
 fa-angle-down"\f107"
 fa-desktop"\f108"
 fa-laptop"\f109"
 fa-tablet"\f10a"
 fa-mobile"\f10b"
 fa-circle-o"\f10c"
 fa-quote-left"\f10d"
 fa-quote-right"\f10e"
 fa-spinner"\f110"
 fa-circle"\f111"
 fa-reply"\f112"
 fa-github-alt"\f113"
 fa-folder-o"\f114"
 fa-folder-open-o"\f115"
 fa-smile-o"\f118"
 fa-frown-o"\f119"
 fa-meh-o"\f11a"
 fa-gamepad"\f11b"
 fa-keyboard-o"\f11c"
 fa-flag-o"\f11d"
 fa-flag-checkered"\f11e"
 fa-terminal"\f120"
 fa-code"\f121"
 fa-reply-all"\f122"
 fa-mail-reply-all"\f122"
 fa-star-half-o"\f123"
 fa-location-arrow"\f124"
 fa-crop"\f125"
 fa-code-fork"\f126"
 fa-chain-broken"\f127"
 fa-question"\f128"
 fa-info"\f129"
 fa-exclamation"\f12a"
 fa-superscript"\f12b"
 fa-subscript"\f12c"
 fa-eraser"\f12d"
 fa-puzzle-piece"\f12e"
 fa-microphone"\f130"
 fa-microphone-slash"\f131"
 fa-shield"\f132"
 fa-calendar-o"\f133"
 fa-fire-extinguisher"\f134"
 fa-rocket"\f135"
 fa-maxcdn"\f136"
 fa-chevron-circle-left"\f137"
 fa-chevron-circle-right"\f138"
 fa-chevron-circle-up"\f139"
 fa-chevron-circle-down"\f13a"
 fa-html5"\f13b"
 fa-css3"\f13c"
 fa-anchor"\f13d"
 fa-unlock-alt"\f13e"
 fa-bullseye"\f140"
 fa-ellipsis-h"\f141"
 fa-ellipsis-v"\f142"
 fa-rss-square"\f143"
 fa-play-circle"\f144"
 fa-ticket"\f145"
 fa-minus-square"\f146"
 fa-minus-square-o"\f147"
 fa-level-up"\f148"
 fa-level-down"\f149"
 fa-check-square"\f14a"
 fa-pencil-square"\f14b"
 fa-external-link-square"\f14c"
 fa-share-square"\f14d"
 fa-compass"\f14e"
 fa-caret-square-o-down"\f150"
 fa-caret-square-o-up"\f151"
 fa-caret-square-o-right"\f152"
 fa-eur"\f153"
 fa-gbp"\f154"
 fa-usd"\f155"
 fa-inr"\f156"
 fa-jpy"\f157"
 fa-rub"\f158"
 fa-krw"\f159"
 fa-btc"\f15a"
 fa-file"\f15b"
 fa-file-text"\f15c"
 fa-sort-alpha-asc"\f15d"
 fa-sort-alpha-desc"\f15e"
 fa-sort-amount-asc"\f160"
 fa-sort-amount-desc"\f161"
 fa-sort-numeric-asc"\f162"
 fa-sort-numeric-desc"\f163"
 fa-thumbs-up"\f164"
 fa-thumbs-down"\f165"
 fa-youtube-square"\f166"
 fa-youtube"\f167"
 fa-xing"\f168"
 fa-xing-square"\f169"
 fa-youtube-play"\f16a"
 fa-dropbox"\f16b"
 fa-stack-overflow"\f16c"
 fa-instagram"\f16d"
 fa-flickr"\f16e"
 fa-adn"\f170"
 fa-bitbucket"\f171"
 fa-bitbucket-square"\f172"
 fa-tumblr"\f173"
 fa-tumblr-square"\f174"
 fa-long-arrow-down"\f175"
 fa-long-arrow-up"\f176"
 fa-long-arrow-left"\f177"
 fa-long-arrow-right"\f178"
 fa-apple"\f179"
 fa-windows"\f17a"
 fa-android"\f17b"
 fa-linux"\f17c"
 fa-dribbble"\f17d"
 fa-skype"\f17e"
 fa-foursquare"\f180"
 fa-trello"\f181"
 fa-female"\f182"
 fa-male"\f183"
 fa-gittip"\f184"
 fa-sun-o"\f185"
 fa-moon-o"\f186"
 fa-archive"\f187"
 fa-bug"\f188"
 fa-vk"\f189"
 fa-weibo"\f18a"
 fa-renren"\f18b"
 fa-pagelines"\f18c"
 fa-stack-exchange"\f18d"
 fa-arrow-circle-o-right"\f18e"
 fa-arrow-circle-o-left"\f190"
 fa-caret-square-o-left"\f191"
 fa-dot-circle-o"\f192"
 fa-wheelchair"\f193"
 fa-vimeo-square"\f194"
 fa-try"\f195"
 fa-plus-square-o"\f196"

هذا الموضوع حصري من مدونة عرب ويب ـ القادم افضل 2014

جزيرة التدوين العربى

المشاركات الشائعة

أرشيف المدونة الإلكترونية

التسميات