আমি কীভাবে গ্লাইফিকনকে আরও বড় করব? (আকার পরিবর্তন?)


239

আমি গ্লোব গ্লিকফিকনটিকে আরও বড় করতে চাই যাতে এটি পৃষ্ঠার একটি বৃহত অংশ জুড়ে (এটি একটি ভেক্টর চিত্র)। এটি কোনও বোতাম বা কোনও কিছুর মধ্যে নয়; এটা ঠিক একা। এই কাজ করতে একটি উপায় আছে কি?

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe"></span>
</div>  

উত্তর:


367

glyphiconসমস্ত আইকনের আকার বাড়াতে ফন্টের আকার বাড়ান ।

.glyphicon {
    font-size: 50px;
}

শুধুমাত্র একটি আইকন লক্ষ্য করতে,

.glyphicon.glyphicon-globe {
    font-size: 75px;
}

2
যে কাজ! (আমি এটি 5 মিনিটের মধ্যে গ্রহণ করব (এটাই সময় বাকী)) এটি কেন্দ্র করার কোনও উপায় আছে কি? @ ভেনমভেন্ডার
কোডার ব্রায়ান

2
text-centerডিভ উপর
আইব্রিয়ান

7
গ্লাইফিকনকে "অন অন ডিমান্ড" ব্যবহার করতে .glyphicon.larger {ফন্ট-আকার: 150%; }
ব্যবহারকারী 216661

এটি আরও পাতলা করে তোলার কী আছে?
নোফেল

!important;বুস্ট্র্যাপ সিএসএসকে ওভাররাইড করতে আমাকে ফন্টের আকারে যুক্ত করতে হয়েছিল।
MeanwhileInHell

143

ফন্টাওয়াইজের এটির একটি নিখুঁত সমাধান রয়েছে।

আমি একই বাস্তবায়ন। আপনার মূল .css ফাইলটিতে এটি যুক্ত করুন

.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}

আপনার উদাহরণে আপনাকে কেবল এটি করতে হবে।

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe gi-5x"></span>
</div>  

নিস! আপনি 1.5 মিটারের মতো ভগ্নাংশও ব্যবহার করতে পারেন।
মাইক তাভের্ন

গৃহীত উত্তরের চেয়ে অনেক ভাল এবং পুনরাবৃত্তি হওয়া সমস্যার জেনেরিক সমাধান দেখায়।
আদম

71

আপনি যদি বুটস্ট্র্যাপ এবং ফন্ট-দুর্দান্ত ব্যবহার করছেন তবে এটি সহজ, নতুন কোডের একটি লাইন লেখার দরকার নেই, কেবলমাত্র एफএ-এনএক্স যুক্ত করুন, আপনি যত বড় চান, ডেমো দেখুন

<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-globe fa-lg"></span>
<span class="glyphicon glyphicon-globe fa-2x"></span>
<span class="glyphicon glyphicon-globe fa-3x"></span>
<span class="glyphicon glyphicon-globe fa-4x"></span>
<span class="glyphicon glyphicon-globe fa-5x"></span>

গ্লাইফিকনস এবং ফন্ট-আশ্চর্যজনক বাহিনী যোগ দিন!
টিমো

আমি এফএ এবং গ্লাইফিকন সংমিশ্রনের পক্ষে নই। ইনলাইন স্টাইল ব্যবহার করে বা উপরে সিএসএস শ্রেণীর মাধ্যমে কীভাবে গ্লাইফিকনকে আপসাইজ করা যায় সে সম্পর্কে নীচের উত্তরটি দেখুন। বা একটি খাঁটি এফএ সমাধানের জন্য ব্যবহার করুন -> এফএ এফএ-গ্লোব এফ
-2 এক্স

মার্কোজেইন: বুটস্ট্র্যাপের পরবর্তী সংস্করণে যাইহোক 4 গ্লাইফিকনগুলি মুছে ফেলা হচ্ছে, আমরা অনেকে আগে এক সাথে ব্যবহার করছিলাম।
আলী আদ্রবী

17

হ্যাঁ, এবং মূলত আপনি ইনলাইন স্টাইলও ব্যবহার করতে পারেন:

<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>

11

শিরোনাম ব্যবহার করার চেষ্টা করুন, অতিরিক্ত সিএসএসের প্রয়োজন নেই

<h1 class="glyphicon glyphicon-plus"></h1>

2
আপনি এটি করতে পারেন, তবে এটি আপনাকে সিএসএসের মতো করে নিয়ন্ত্রণের একটি দুর্দান্ত স্তর দেয় না।
ম্যাটডি

6
ফন্ট-আকারে তাদের প্রভাবের কারণে শিরোনামগুলি ব্যবহার করা একটি অ্যান্টি-প্যাটার্ন। কীবোর্ডের সাহায্যে আপনার সাইটটি নেভিগেট করা কোনও ব্যবহারকারী সরাসরি আপনার আইকনে প্রেরণ করা হবে কারণ স্ক্রিন পাঠক ধরে নিচ্ছেন যে এটি পৃষ্ঠার সর্বাধিক গুরুত্বপূর্ণ সামগ্রীর শিরোনাম / শিরোনামকে বোঝায়।
রায়

9

প্রাক্তন জন্য .. বর্গ যোগ করুন:

বিটিএন-এলজি - খুব বেশি

বিটিএন-এসএম - ছোট

বিটিএন-এক্স - খুব ছোট

<button type=button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden=true></span>Star
</button>

 <button type=button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

রেফ লিঙ্ক বুটস্ট্র্যাপ: গ্লাইফিকন বুটস্ট্র্যাপ


7
প্রশ্নটি ইমেজগুলিকে বিবেচনা করে, চিত্রগুলি বোতাম হিসাবে নয়।
ব্যবহারকারী 216661

0

আমি এর জন্য বুটস্ট্র্যাপ হেডার ক্লাস ("এইচ 1", "এইচ 2" ইত্যাদি) ব্যবহার করেছি। এইভাবে আপনি প্রকৃত ট্যাগগুলি ব্যবহার না করে সমস্ত স্টাইলের সুবিধা পান। এখানে একটি উদাহরণ:

<div class="h3"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></div>

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.