رفتن به مطلب
جامعهٔ برنامه‌نویسان ایران
کامبیز اسدزاده

نحوهٔ استفاده از فونت آیکون


پست های پیشنهاد شده

معمولاً برای استفاده از آیکون‌ها در برنامه از تصاویر با فرمت‌های png, svg, gif استقبال می‌شود، اما بعضاً نیاز است نسبت به دستگاه‌ها و صفحه‌های نمایشی با کیفیت بسیار بالا تصاویر با تعداد پیکسل متناسب با صفحه مورد استفاده قرار گیرند. اما روشی وجود دارد که می‌توان با حجم کمتر و کیفیت بسیار بالاتری از تصاویر برداری مانند SVG و یا فونت‌های آیکونیک استفاده کرد. این فناوری در وب، موبایل و دسکتاپ مورد استقبال قرار می‌گیرد و ما در این بخش قرار است راجع به نحوهٔ استفاده از فونت‌های آیکونی در پروژه‌های تحت فناوری کیوت کوئیک و QML صحبت کنیم.

قبل از هر چیز لازم است فونت آیکونیک مورد نظر خود را دریافت و بر روی پروژه خود اعمال کنید. برای این منظور ما FontAwesome را پیشنهاد می‌کنیم. جهت دریافت نسخه‌ به روز آن را از این بخش دریافت کنید.

وارد محیط Qt Creator شوید و پروژهٔ خود را از نوع Qt Quick ایجاد کنید، در بخش qrc فونت‌های دسکتاپ را به پروژه اضافه کنید. سپس وارد فایل main.qml شده و نوع تعریف فونت را اعلان کنید. به صورت زیر:

    FontLoader {
        id:fontAwesomeStandard
        source: "qrc:/font/Font Awesome 5 Free-Regular-400.otf"
    }

    FontLoader {
        id:fontAwesomeBrand
        source: "qrc:/font/Font Awesome 5 Brands-Regular-400.otf"
    }

    FontLoader {
        id:fontAwesomeSolid
        source: "qrc:/font/Font Awesome 5 Free-Solid-900.otf"
    }

توجه داشته باشید که کُد‌های یونیک را با کاراکتر u ترکیب کنید. برای مثال کد f007 شناسه آیکون کاربری می‌باشد که در اینجا باید به صورت u\f007 نوشته شود.

    Text {
        text: "\uf007"
        font.family: fontAwesomeSolid.name
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        font.pixelSize: 128
        anchors.centerIn: parent
    }

کُد‌های مختص آیکون‌ها نسبت به نوع فایل فونت متفاوت هستند، کد مرتبط با آیکون کاربر در داخل فایل Free-Solid می‌باشد که باید به آن‌ها توجه کنید. برای به دست‌ آوردن کد‌های آیکونیک از طریق این آدرس اقدام کنید. برای مثال فایل Brand دارای آیکون‌های برندیگ است که کد آن به صورت زیر خواهد بود.

    Text {
        text: "\uf369"
        font.family: fontAwesomeBrand.name
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        font.pixelSize: 128
        anchors.centerIn: parent
    }

در ادامه می‌توانید فایل ضمیمه شده پروژه را دریافت نمایید.

FontAwesome.zip

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

درود و خسته نباشید و ممنون بابت پست مفیدتون

 

گفتم بقیه دوستان هم بدونن پک دسکتاپ این فونت معرفی شده در دسکتاپ مشکلی نداره ولی بیشتر موارد این فونت روی دستگاه های اندرویدی ساپورت نمیشن فونت icofont کامل روی گوشی های اندرویدی ساپورت میشن.

 

تشکر

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

به گفتگو ملحق شوید

شما همین الآن می‌توانید مطلبی را ارسال و بعداً ثبت‌نام کنید. اگر حساب کاربری دارید، و با حساب کاربری خود مطلب ارسال کنید.
نکته: مطلب شما قبل از انتشار نیاز به بازبینی توسط میانجی‌گر‌ها دارد.

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از ۷۵ اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به عنوان یک لینک به جای

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.


  • کاربران آنلاین در این صفحه   0 کاربر

    هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.

×
×
  • جدید...