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

( پنجشنبه ، 4 خرداد سال 1402 )

حق کپی ویدئو

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

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

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

آموزگار :

مهدی جبین پور

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

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

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

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

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

اورجینال

کیفیت

پشتیبانی

آپدیت

مهدی جبین پور

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

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

مهدی جبین پور

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

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

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

( پنجشنبه ، 4 خرداد سال 1402 )

فونت آیکون

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

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

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

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

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

آیکون تصویری

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

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

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

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

 

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

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

43 دیدگاه. Leave new

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

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

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

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

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

  • سلام میشه لطفا یک فیلتر شکن معرفی کنید من نمیتونم سایت 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 ب.ظ

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

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

فهرست