استفاده از آیکن های زیبا در طراحی وب

( چهارشنبه ، 5 اردیبهشت سال 1403 )

حق کپی ویدئو

مجاز نمی باشد.

شما اینجا هستید :

جلسه پنجاه و سه

آموزگار :

مهدی جبین پور

در طراحی سایت به جای متن و نمادهای ساده می توانید از آیکون ها (Icon) استفاده کنید. آیکون ها در گرافیک و زیبایی سایت تأثیر زیادی داشته و موردپسند کاربر نیز هستند.آیکون ها به صورت فونت آیکون و تصویر مورد استفاده قرار می گیرند که در ادامه آن ها را توضیح می دهیم ( ادامه مطلب … )

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

آنچه توانسته ایم لطف خدا بوده است ، ابزار وردپرس بعنوان یکی از مراجع بزرگ طراحی وب و وردپرس در حال فعالیت می باشد 🙂

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

آنچه توانسته ایم لطف خدا بوده است ، ابزار وردپرس بعنوان یکی از مراجع بزرگ طراحی وب و وردپرس در حال فعالیت می باشد 🙂

اورجینال

کیفیت

پشتیبانی

آپدیت

مهدی جبین پور

مـهـدی جـبین پـور

دانشجوی دکتری تجارت الکترونیک ، امیدوارم بتوانم خدمتگزار خوبی برای مردم کشورم باشم.

مهدی جبین پور

مـهـدی جـبین پـور

دانشجوی دکتری تجارت الکترونیک ، امیدوارم بتوانم خدمتگزار خوبی برای مردم کشورم باشم.

استفاده از آیکن های زیبا در طراحی وب

( چهارشنبه ، 5 اردیبهشت سال 1403 )

فونت آیکون

در صفحه­ ساز ویژوال کامپوزر، المان آیکون را جستجو کنید. المان­ های مختلفی از آیکون برای نمایش استفاده می­کنند که شما می ­توانید بر اساس نوع طراحی خود این المان ­ها را انتخاب کنید.

حال برای توضیح روند اضافه کردن آیکون، ما المان “آیکون” را انتخاب و به صفحه­ ساز اضافه می­کنیم. در صفحه تنظیمات آیکون، از بین کتابخانه­ هایی که برای آیکون وجود دارد یکی را انتخاب نمایید( برای مثال کتابخانه معروف Font Awesome را از جعبه بازشونده کتابخانه­ ها کلیک کنید). سپس از “جعبه آیکون”، آیکون مورد نیازتان را انتخاب کنید. همچنین تنظیماتی مثل ترازبندی آیکون، اندازه و … را نیز می ­توانید تغییر دهید.

برای یک مثال دیگر، در المان “باکس آیکون” شما می­بایست نام آیکون را از لینک لیست آیکون­ های سایت Font Awesome انتخاب کرده و در جعبه مشخص شده، نام آیکون را وارد نمایید.

ذکر این نکته لازم است که سایت https://fontawesome.com/  محدود بوده و باید از برنامه­ های رفع فیلتر استفاده کنید.

پس از اضافه کردن آیکون و ذخیره تغییرات، این المان­ ها به سایت اضافه می­شود.

آیکون تصویری

معمولاً المان ­های Ultimate Addons، قسمتی برای اضافه کردن آیکون دارند. المان “باکس اطلاعات” را در نظر بگیرید. در صفحه تنظیمات این المان، قسمت “آیکون برای نمایش”، گزینه آیکون تصویر را انتخاب نمایید. پس از آن می­بایست تصویر آیکون را آپلود کنید. شما می­توانید از سایت flaticon.com، تصاویر مختلفی از آیکون­ ها را مشاهده و دانلود نمایید.

(سایت flaticon.com محدود بوده و برای مشاهده و دانلود آیکون باید از ابزارهای رفع فیلتر استفاده کنید.) نام آیکون یا دسته­ بندی آیکون مورد نظر خود را در جعبه جستجو در سایت flaticon.com جستجو کرده و از بین آیکون­ های نمایشی، آیکون مورد نیازتان را انتخاب و دانلود کنید.

حال تصویر آیکون را در صفحه تنظیمات المان باکس اطلاعات آپلود کنید. با استفاده از سایر تنظیمات می­توانید برای آیکون عنوان، توضیحات، انیمیشن و … اضافه کنید.

پس از ذخیره تنظیمات، آیکون­ های تصویری و جذابی که به سایتتان اضافه کردید را در مرورگر مشاهده کنید.

 

امیدواریم پس از مطالعه این مقاله با آیکون ­ها در وردپرس آشنا شده باشید و بتوانید به ­راحتی از آن­ ها در صفحات سایت خود بهره ببرید.

برای نوشتن دیدگاه باید وارد بشوید.

58 دیدگاه. Leave new

  • فاطمه عزيزي
    مارس 31, 2024 11:30 ق.ظ

    الان كلا شما سه تا ايكون معرفي كردین توی این ویدیو و اون ایکونی که اسمش ایکون باکس هست روی صفحه ی سایتم که قرار میدمش نمایش داده نمیشه
    رو بعضی از ردیف ها نمایش داده میشه رو بعضی از ردیف ها که قرار میدمش بعد از به روز رسانی نمایش داده نمیشه رو سایت

    • سلام و عرض ادب،

      مشکل آیکون به چند دلیل می تواند باشد.

      1 – نصب ناقص Ssl یا کانفیگ نبودن آن در سایت که باعث مربعی نمایش داده شدن آیکون ها می شود.

      2- تنظیمات مربوط به کش قالب و یا افزونه کش مورد استفاده در سایت. که اگر اینمورد باشد، با تغییر تنظیمات افزونه کش مشکل حل می شود.

      3- استفاده از ورژن 6 فونت آسوم. (در ورژن 6 فونت آسوم تغیراتی رخ داده است که به خوبی در قالب ها نمایش داده نمی شود و این مورد باید از سمت سازنده های قالبی که از فونت آسوم استفاده می کنند بروزرسانی شود.  در ورژن 5 این مشکل وجود ندارد و به خوبی آیکون ها نمایش داده میشوند.) <a href=”https://screen.center/s/LnWGJ”> راهنمای تصویری </a>

      تقریباً بیشتر مواقع بدلیل گزینه 1 و یا 3 می باشد. در صورتی که مشکل شما حل نشد، به پشتیبانی محصول خود تیکت ارسال نمایید.

      در صورت تهیه از ابزار وردپرس ، از بخش ناحیه کاربری > تیکت ارسال نمایید تا ما بررسی نماییم.

      با تشکر.

  • فاطمه عزيزي
    مارس 30, 2024 10:39 ب.ظ

    سلام ايكون باكس من در بعضی ردیف ها نمایش داده میشه بعضیا نه
    علت چی هست؟

  • گل آسا پناهی الفت
    ژانویه 16, 2024 3:18 ب.ظ

    ببخشید من هیچ قالبی نصب ندارم
    گزینه ایکون رو ندارم از کجا بیارمش
    چطوری میشه یک نوشته رو تبدیل به برگه کرد

  • امیررضا کریمی
    نوامبر 30, 2023 1:05 ب.ظ

    سلام و قت بخیر برای من باکس اطلاعات نمیاره info box هم سرچ کردم تاثیر نداشت

  • مهدی نوروزی
    نوامبر 27, 2023 12:02 ب.ظ

    دوست عزیز چرا نمیذاره فایل svgباگذاری کرد تا الان این طوری نبوده

  • سپیده احمدی
    آگوست 27, 2023 3:29 ب.ظ

    سلام وقت بخیر سایت دیگه ای به غیر از flaticon میشه معرفی کنید؟کلا سایتش باز نمیشه

    • وقت بخیر خانم احمدی ، در صورت که در گوگل بصورت related:flaticon.com سرچ نمایید ، سایت های مشابه آن را نمایش میدهد. اما این سایت هم بخوبی باز می شود و مشکلی ندارد.
      دقت نمایید که این سایت ip ایران را تحریم کرده است و باید با نرم افزار های تغییر ip سایت را باز کرد.

  • غلامرضا آگاه
    آگوست 7, 2023 4:13 ب.ظ

    سلام عرض میکنم خدمت استاد جبین پور عزیز و زحمت کش
    استاد کلام شما در دقیقه 11:30 این ویدیو من رو یاد فرمایش امام علی (عیه السلام) افتادم که : «زَکوةُ العِلمِ نَشرُهُ؛ زکات علم نشر دادن آن است»
    متشکرم از زحمات و دلسوزی شما و تیم ارزشمندتون

  • سلام وقتتون بخیر میخواستم بپرسم که در طراحی سایت برای زیر مجموعه یک برگه که درست میکنیم برای اون زیر مجموعش چطور باید لینک بدیم یعنی چه لینکی بدیم که امکان وارد شدن در اون برگه های زیر مجموعه شیم
    به صورت پیش فرض # میزاریم منتها میخوایم لینک بدیم چه لینکی باید بدیم که اون برگه هایی که زیر مجموعه یک برگه هستند باز بشن و طراحی کنیم؟

    • سلام بر شما ، وقت بخیر از حضور شما ممنونیم.

      شما باید لینک برگه مد نظر را قرار دهید ، به هرحال هر برگه یک لینکی دارد.
      همچنین می توانید کلا از بخش نمایش > فهرست ها ، خوده برگه را انتخاب نمایید.

      آرزوی موفقیت برای شما داریم.

      • بله خود برگه در قسمت فهرست زمانی که بخوایم چند زیر مجموعه برای آن درست کنیم اون برگه هایی که زیر مجموعه یک برگه هستند نیاز به لینکی دارند که بتوان وارد آنها شد منتها بنده متوجه نشدم چطور میشه لینک گذاشت برای آنها که در سایت با کلیک روی زیر مجموعه یک برگه وارد آن شویم یعنی چه لینکی باید برای هرکدام از اون زیر مجموعه ها گذاشت؟

  • سلام میشه لطفا یک فیلتر شکن معرفی کنید من نمیتونم سایت fontawesome رو باز کنم

  • امیر عرفانی
    می 6, 2022 10:18 ب.ظ

    سلام و خسته نباشید به استاد عزیزم مـهـدی جـبین پـور آقا دمتون گرم خدا خیرتون بده واقعا نمیدونید چقدر به من و جوون هایی مثل من محبت و انگیزه میدید خداییش واقعا سخته ، من در کنار حرفه اصلیم که گرافیک هستش دارم با آموزش ها خوبتون طراحی سایت رو یاد میگیرم ، دمتتون گرم و تنتون سلامت ، من یکی از دوستام تو شرایط وخیمی بود و متاسفانه به جاهای بدی داشت کشیده میشه (اعتیاد و . . .) بخاطره بی پولی ، ولی وقتی من اموزش های شما رو پیدا کردم بهش انگیزه دادم و گفتم اگ از این اموزش های خوب مثل من استفاده کنه قطعا موفق میشه ، بازم دمتون گرم

  • آرین شفیعی
    مارس 11, 2022 2:03 ب.ظ

    سلام .آیکون ها توی گوشی ۴خط شده چجوری ارتفاع رو کمتر کنم و در دو ردیفه دوتایی کنار هم قرار بگیرن

    • علی حیدری
      مارس 11, 2022 2:21 ب.ظ

      سلام بر شما،
      اگر بصورت دقیق متوجه سوال و مشکل شما شده باشم، آموزش زیر را مشاهده نمایید.
      دریافت ویدیو از سرور 1:

      5aa.ir/9nCwZ

      دریافت ویدیو از سرور 2:

      5aa.ir/sc3fi
      با تشکر.

  • بله بله ممنون از شما بابت اموزشاتون من این دوره رو به چند نفر دیگه هم معرفی کردم و اوناهم درحال استفاده هستند.

    • سولماز دهقانی
      فوریه 8, 2023 10:38 ق.ظ

      سلام
      موقع استفاده از این سایت‌هایی که فیلتره
      مثلا آیکون ها رو از این سایتا برداریم ولی کاربر فیلترشکن نداشته باشه آیکون های داخل سایت ما برای اون کاربرانی که فیلترشکن استفاده نمیکنن هم نمایش داده میشه؟

  • لیلی اسمعیلی
    آگوست 16, 2021 3:57 ب.ظ

    سلام و سپاس از آموزش های بینظیرتون
    من چطور میتونم آیکن برگشت به بالا رو تغییر بدم و آیکن دلخواه خودم رو قرار بدم؟

  • امیرحسین معتمدی
    آگوست 11, 2021 3:36 ب.ظ

    سلام خسته نباشید ممنون از سایت خوبتون و آموزش هایتون
    من میخواهم یک ایکون هواپیما متحرک از سمت راست صفحه به سمت چپ صفحه برود داشته باشم اکامنش هست راهنماییم کنید که چجوری میتونم این رو انجام بدم؟

  • محمدصدرا صراف
    آگوست 9, 2021 2:55 ق.ظ

    باسلام میخواستم بدونم از کدوم سایت ها میتونم عکس های گرافیکی برای سایتم دانلود کنم؟

  • مریم حسینی
    آگوست 4, 2021 6:48 ب.ظ

    باسلام میخواستم بدونم المانی هست که این قابلیت رو داشته باشه که یک آیکون در صفحه باشه وقتی روش کلیک میشه زیرش متن باز بشه و اطلاعات آورده بشه؟

  • احمدرضا پورمحمد
    آگوست 3, 2021 12:32 ب.ظ

    سلام
    آرزو میکنم هر لحظه زندگی شما و تیمتون پر از شادی و اشتیاق
    رسیدن به هدف بعدیتون باشه❇️
    خواستم به سهم خودم تشکر کنم از تلاش این مجموعه پرتلاش،امیدبخش و پر انرژی????
    همیشه شاد و سلامت باشید???

  • محمد وفائی پور
    آوریل 17, 2021 8:29 ق.ظ

    آیا امکانش هست که من با نرم افزار های طراحی وکتور خودم فونت آیکن طراحی کنم و در بخشی مختلف استفاده کنم اگه میشه چجوریه و با چه فرمتی باید طراحی کنم

  • النا حیدری
    فوریه 9, 2021 11:42 ق.ظ

    مرسی از اینکه انقد زیبا فکر می کند و تجربیاتتون رو با همه به اشتراک میگذارید . انشالا در تمام مراحل زندگی موفق باشید .

  • خدا قوت. مجددا برای آموزش های خوبتون تشکر میکنم و امیدوارم خدا هم همواره بهترین های خودش رو نصیب شما و تیمتون بکنه.

  • سید مسعود حسینی
    دسامبر 29, 2020 5:16 ق.ظ

    سلام، وقت به خیر، دوستان توجه کنید در قسمت font icon اگر فقط نام آیکون را به انگلیسی وارد کنید، برای مثال ambulance، آیکون اون شکل نشون داده میشه و نیازی نیست حتما به سایت fontawesome مراجعه کنید و از اونجا اسم آیکون رو کپی کنید، موفق باشید.

    • کارشناس پشتیبانی شماره سه
      دسامبر 29, 2020 5:31 ق.ظ

      سلام جناب حسینی ، از اینکه نظرتون را مطرح نمودید سپاسگزاریم.
      این سایت اسم ها را خیلی واضح قرار می دهد و این کار را می توان تا حدی انجام داد. ولی ممکن است یک موضوع ایکن چند حالت داشته باشد که در این صورت که همه انها با هم تناسب داشته باشند نیاز باشد سایت فونت اوسام را مشاهده نمایید.
      از اینکه با ابزار وردپرس همراه هستید از شما سپاسگزاریم.

  • ایمان هادیزاده
    دسامبر 6, 2020 12:10 ق.ظ

    سلام خسته نباشید .ممنون از سایت بی نظیرتون
    میخواستم بپرس افزونه هایی که از شما خریداری میشه فقط روی یک سایت قابل استفاده است ؟؟ یا میشه از افزونه ها روی چند سایت استفاده کرد ؟؟

    • تیم پشتیبانی
      دسامبر 9, 2020 12:58 ق.ظ

      سلام ، احتراماً همانطور که اطلاع دارید طبق قوانین تا این تاریخ هیچ گونه محدودیتی بابت تعداد دفعات نصب بر روی سایت های یک شخص در محصولات ابزار وردپرس  لحاظ نشده است. البته پشتیبانی محصولات با توجه به هزینه بخش پشتیبانی و نیروی انسانی برای یک دامنه ارائه می گردد. باتشکر

  • سینا اکبری
    دسامبر 3, 2020 1:14 ق.ظ

    درود به شرفت ..

  • حسین مومن زاده
    نوامبر 17, 2020 6:58 ب.ظ

    سلام و خسته نباشید
    ممنون از کلیپ های فوق العاده تون
    ببخشید من یه مشکلی دارم خواهشا روش رفعش رو بگید
    وقتی کتاب خانه jquery رو فعال میکنم تمام انیمیشن های که برای ایکون ها یا چیزای دیگ هست غیر فعال میشه و ایکون ثابت در سایت ظاهر میشه
    و وقتی غیر فعالش میکنم متن های فنسی نمایش داده نمیشه

  • ناصر بابارحیم
    نوامبر 17, 2020 2:32 ب.ظ

    سلام بر استاد گرامی انشا الاه روزی برسه تمام انسانهای روی زمین باوری که شما دارید وبخشنده هستید داشته باشند ممنون

  • کاملادرسته.ومن هم اموزش های عالی شمارابه دوستان پیشنهادمیدم

  • سید پیمان حسینی
    اکتبر 13, 2020 7:58 ب.ظ

    سلام آقای جبین عزیز و تیم محترمتون.خیلی از شما ممنونم بخاطر آموزش هاتون و محبتی که به هم نوع های خودتون دارین

  • مبین زمانی
    اکتبر 7, 2020 6:32 ب.ظ

    سلام با فلت آیکون میشود آیکون برای منو گذاشت؟؟؟؟؟؟؟؟؟؟؟؟؟ یا زیر منو ها؟؟؟؟؟؟؟

  • سلام . بسیار آموزشها عالی هستند من از صفر شروع کردم یعنی هیچی هیچی از اینکه سایت ساختن چطوریه نمیدونستم ولی الان خدا را شکر کاملا متوجه شدم. و اینکه واقعا آموزشها کاربردیه و وقت تلف کنی نیست. با تمام وجود از خدا براتون بهترینها را خواستارم.

فهرست