رفتن به مطلب

طراحی باکس با Css برای وردپرس به همراه آیکون


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

وقت بخیر

بنده میخوام برای سایتم با Css یک باکس طراحی کنم که مثل تصویر ضمیمه شده باشه و آیکون داشته باشه اما نمیدونم چطور باید آیکون رو اضافه کنم به باکس.اگه میشه راهنمایی بفرمایید.

لینک سایت ضمیمه شده (جهت بررسی کلاس ها) :

https://webbob.ir/how-to-find-website-source/

چگونه سورس سایت را پیدا کنیم؟ - وب باب - Mozilla Firefox 9_2_2020 11_58_40 AM.png

لینک به ارسال

سلام راههای زیادی وجود داره میتونید از :after و یا :before استفاده کنید و بهش استایل دلخواه خودتون رو بدید حالا داخل استایل یا از عکس استفاده کنید یا fontawesome و یا اینکه یک کلاس به html اضافه کنید و استایل دلخواه بدید

بنده چک کردم شما ایکونتون رو قرار دادید الان قصد دارید که این آیکون رو تغییر بدید ؟

در سایت شما از fontawesome استفاده شده  برای تغییر میتونید لیستش رو در اینجا مشاهده کنید

https://fontawesome.com/cheatsheet

 

لینک به ارسال
در 23 دقیقه قبل، asadiy4n گفته است :

سلام راههای زیادی وجود داره میتونید از :after و یا :before استفاده کنید و بهش استایل دلخواه خودتون رو بدید حالا داخل استایل یا از عکس استفاده کنید یا fontawesome و یا اینکه یک کلاس به html اضافه کنید و استایل دلخواه بدید

بنده چک کردم شما ایکونتون رو قرار دادید الان قصد دارید که این آیکون رو تغییر بدید ؟

در سایت شما از fontawesome استفاده شده  برای تغییر میتونید لیستش رو در اینجا مشاهده کنید


https://fontawesome.com/cheatsheet

 

میشه کدی که باید بزارم رو بی زحمت لطف بفرمایید؟

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

لینک به ارسال
در 4 دقیقه قبل، asadiy4n گفته است :

این یک نمونه متناسب با چیزی که میخواید هست


https://codepen.io/ahmetaksungur/pen/QWjmomP

 

ممنون از پاسخگوییتون

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

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

 

لینک به ارسال
در 22 دقیقه قبل، asadiy4n گفته است :

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

بنده در یک برگه به صورت تست این کد پس زمینه رو که همون رنگ قرمز هست و یک حاشیه تره تر داره قرار دادم اما مشکل من گذاشتن آیکون هستش

 

لینک صفحه :

https://webbob.ir/class/

 

لینک به ارسال

خب بهتون کدش رو دادم که

ببینید بذارید ساده تر توضیح بدم

اول که شما باید fontawesome رو قالبتون فعال باشه میتونید این رو داخل head قالب بذارید

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

بعد کد html

<div class="alert">
    <b>توجه :</b> متن امتحانی متن امتحانی متن امتحانی متن امتحانی.
</div>

تا اینجا ما فقط یک متن داریم بدون هیچ ظاهر خاصی

حالا بخش ظاهر و آیکونش

.alert { /* این بخش فقط قالب دورش هست */
    max-width: 550px;
    position:  relative;
    padding: 10px 20px 10px 10px;
    margin:  10px auto;
    border-radius: 3px;
    background-color: #faf8df;
    border: 2px solid #f5c340;
    border-right-width: 40px;
    direction: rtl;
}
.alert:before { /* این بخش برای آیکون هست */
    content: '\f071'; /* <~~ این نوع آیکون شماست برای تغییر از نمونه ها استفاده کنید ( https://fontawesome.com/cheatsheet ) */
    font-family: "FontAwesome";
    position: absolute;
    right: -27px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
}

البته میتونید از before هم استفاده نکنید و این کد رو به html اضافه کنید

<i class="icon-warning-sign"></i>

امیدوارم با این توضیحات مشکلتون حل بشه

لینک به ارسال
در ۱ ساعت قبل، asadiy4n گفته است :

@roham.mpk

الان برای لینکی که دادید به این شکل میشه


.text{position: relative;}
.text:before{
	content: '\f071';
  font-family: "FontAwesome";
  position: absolute;
  right: 10px;
  top: 15px;
  transform: translateY(-50%);
  color: #fff;
	z-index: 1
}

 

 

در 1 ساعت قبل، asadiy4n گفته است :

خب بهتون کدش رو دادم که

ببینید بذارید ساده تر توضیح بدم

اول که شما باید fontawesome رو قالبتون فعال باشه میتونید این رو داخل head قالب بذارید


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

بعد کد html


<div class="alert">
    <b>توجه :</b> متن امتحانی متن امتحانی متن امتحانی متن امتحانی.
</div>

تا اینجا ما فقط یک متن داریم بدون هیچ ظاهر خاصی

حالا بخش ظاهر و آیکونش


.alert { /* این بخش فقط قالب دورش هست */
    max-width: 550px;
    position:  relative;
    padding: 10px 20px 10px 10px;
    margin:  10px auto;
    border-radius: 3px;
    background-color: #faf8df;
    border: 2px solid #f5c340;
    border-right-width: 40px;
    direction: rtl;
}
.alert:before { /* این بخش برای آیکون هست */
    content: '\f071'; /* <~~ این نوع آیکون شماست برای تغییر از نمونه ها استفاده کنید ( https://fontawesome.com/cheatsheet ) */
    font-family: "FontAwesome";
    position: absolute;
    right: -27px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
}

البته میتونید از before هم استفاده نکنید و این کد رو به html اضافه کنید


<i class="icon-warning-sign"></i>

امیدوارم با این توضیحات مشکلتون حل بشه

ممنون از راهنماییتون .مشکلی که هست الان اینه که آیکون نشون داده نمیشه

سفارشی‌سازی_ تست - وب باب - Mozilla Firefox 9_2_2020 5_13_40 PM.png

لینک به ارسال
در 14 دقیقه قبل، roham.mpk گفته است :

 

ممنون از راهنماییتون .مشکلی که هست الان اینه که آیکون نشون داده نمیشه

سفارشی‌سازی_ تست - وب باب - Mozilla Firefox 9_2_2020 5_13_40 PM.png

دمت گرم استاد.مشکل حل شد فقط یه مشکل هست اینکه آیکون مثل تصویری که تو پاسخ قبلی ضمیمه کردمه و وقتی کد ایکون رو پاک میکنم دوباره میزارم درست میشه.مشکل چیه؟

ویرایش شده توسط roham.mpk
لینک به ارسال
در 5 ساعت قبل، roham.mpk گفته است :

دمت گرم استاد.مشکل حل شد فقط یه مشکل هست اینکه آیکون مثل تصویری که تو پاسخ قبلی ضمیمه کردمه و وقتی کد ایکون رو پاک میکنم دوباره میزارم درست میشه.مشکل چیه؟

فونتی که برای آیکن  در نظر گرفتید رو درست به المان ندادید. این کد رو برای .alert::before قرار بدید در کنار بقیه کدها:

font-family: FontAwesome !important;

در واقع اینجوری میشه:

.alert::before {
    content: '\f064';
    font-family: FontAwesome !important;
}

 

لینک به ارسال
در 13 ساعت قبل، yazdaniwp گفته است :

فونتی که برای آیکن  در نظر گرفتید رو درست به المان ندادید. این کد رو برای .alert::before قرار بدید در کنار بقیه کدها:


font-family: FontAwesome !important;

در واقع اینجوری میشه:


.alert::before {
    content: '\f064';
    font-family: FontAwesome !important;
}

 

میشه راهنمایی بفرمایید مشکل حل نشد متاسفانه

و به این شکل هست هنوز باکس:

7 فوبیای عجیب تکنولوژی که تا به حال فکرش را هم نمی کردید! - وب باب - Mozilla Firefox 9_3_2020 12_42_32 PM.png

ویرایش شده توسط roham.mpk
لینک به ارسال
در 16 دقیقه قبل، roham.mpk گفته است :

میشه راهنمایی بفرمایید مشکل حل نشد متاسفانه

سلام چک کردم شما اصلا کد رو کامل قرار ندادید!

.alert:before {
    content: '\f071';
    font-family: "FontAwesome";
    position: absolute;
    right: -27px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
}

 

Untisdatled.jpg

لینک به ارسال
در 2 ساعت قبل، asadiy4n گفته است :

سلام چک کردم شما اصلا کد رو کامل قرار ندادید!


.alert:before {
    content: '\f071';
    font-family: "FontAwesome";
    position: absolute;
    right: -27px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
}

 

Untisdatled.jpg

متاسفانه درست نشد و بدتر موقعیت باکس به هم ریخت.

وقتی تگ !important رو میزارم درست میشه اما فونت ایران سنس میره از روی باکس.

در ضمن اون آیکون توی گوشی در جای مناسب نمی افته (اون قسمت تیره تر باکس) و روی قسمت روشن تر باکس هست.

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

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

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

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

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

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

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

×
×
  • اضافه کردن...