একটি বৃত্তে হরফ হরফ আইকন তৈরি করুন?

Question

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

<i class="fa fa-lock"></i>

সব আইকন কি সর্বদা সীমান্তের সাথে বৃত্তাকার বৃত্তে থাকতে পারে? এরকম কিছু, আমার একটি ছবি রয়েছে:

ব্যবহার

i {
  background-color: white;
  border-radius: 50%;
  border: 1x solid grey;
  padding: 10px;
}

প্রভাব ফেলবে, তবে সমস্যাটি হ'ল আইকনগুলি সর্বদা বড় যে পাশের পাঠ্য বা উপাদান, কোনও সমাধান?

Answer 1

i.fa {
  display: inline-block;
  border-radius: 60px;
  box-shadow: 0px 0px 2px #888;
  padding: 0.5em 0.6em;

}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-wrench"></i>

---

পুরানো উত্তরের জেএসফিডাল: http://food.jshell.net/4LqeN/

Comments

কিছু পেয়েছেন, তবে বৃত্তাকার বৃত্ত নয়?

— স্নাইডার

border-radiusউপাদান সুসম্পন্ন করা উচিত নয়। আপনি কোন ব্রাউন ব্যবহার করবেন? উপসর্গ দিয়ে আমার উত্তর আপডেট করবে

— নিকো ও

তবে এটি কোনও সমাধান নয়। এটি কেবল তখনই কাজ করে যদি iবিষয়বস্তু থাকে। সাধারণত এফএর সাহায্যে আপনার আই-ট্যাগের মধ্যে সামগ্রী থাকে না, তবে আইকনটি পরে সিএসএস দ্বারা রেন্ডার করা হয়: <i class="fa fa-lock"></i>এবং এটিই আসলে স্নায়াইডারের কাছে চেয়েছিল।

— জানুয়ারী

@ জান আমি আগামীকাল তা তদন্ত করব। তবে আমি কোনও সমস্যা দেখতে পাচ্ছি না। আপনি ঠিক বলেছেন, ট্যাগগুলিতে সামগ্রী নেই, তবে বিষয়বস্তু CSS এর মাধ্যমে যুক্ত করা হবে। এমনকি আইকনটি লোড করতে ব্যর্থ হলে, আপনি একটি বৃত্ত দেখতে পাবেন। আপনি উত্তরটি দিয়ে দেখতে পাওয়া কোনও সমস্যার একটি জেএসফিডেল তৈরি করতে পারেন?

— নিকো ও

না এটি প্রশ্নের উত্তর। প্রশ্নের চিত্র দেখুন। একটি ছায়া আছে, একটি শক্ত বৃত্ত নয়।

— নিকো হে

Answer 2

হরফ ফন্ট সহ আপনি সহজেই এই জাতীয় স্ট্যাকড আইকন ব্যবহার করতে পারেন:

<span class="fa-stack fa-2x">
  <i class="fas fa-circle-thin fa-stack-2x"></i>
  <i class="fas fa-lock fa-stack-1x fa-inverse"></i>
</span>

পড়ুন ফন্ট জট্টিল সারিবদ্ধ আইকন

আপডেট: - স্ট্যাকড আইকনগুলির জন্য ফিডল

Comments

স্ট্যাকড আইকনগুলি কেবল 2x অবধি কাজ করে। আপনি যদি এর চেয়ে বড় চান, এটি কার্যকর হয় না

— জে লি

এটি যদি স্বীকৃত উত্তর হয় তবে এটি হ'ল ফন্টউইজটি সহ এটি করার "সঠিক" উপায়। গৃহীত উত্তর হ্যাক যা ভালভাবে সামঞ্জস্য করে না।

— জিজ্ঞাসা_ইউ

সংখ্যার সাথে একই<span class="fa-stack fa-lg"> <i class="fa fa-circle-thin fa-stack-2x"></i> <i class="fa fa-stack-1x">1</i> </span>

— m3nda

@ এমরাহ - এখানে এটিই একমাত্র বিকল্প যা সত্যই হ'ল ফন্টউইউজ, কাস্টম সিএসএস নয়, তাই এখানে আরও কিছু সুনির্দিষ্ট।

— 22_20 এ 6_16

খুব মার্জিত সমাধান। @ এমএমটিভ যদি আপনি বৃত্তের একটি পটভূমি রঙ বোঝায় তবে আপনি কেবল <i class = "fa fa-বৃত্ত-পাতলা এফ-স্ট্যাক

— -2

Answer 3

এর জন্য আপনার সিএসএস বা এইচটিএমএল ট্রিকসের প্রয়োজন নেই। ফন্ট আশ্চর্য এর জন্য ক্লাসে তৈরি করেছে - এফএ-সার্কেল একাধিক আইকন একসাথে স্ট্যাক করতে আপনি পিতামহিক ডিভের জন্য এফএ-স্ট্যাক ক্লাস ব্যবহার করতে পারেন

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span> 

// এবং এখন আমাদের বৃত্তের ভিতরে ফেসবুক আইকন রয়েছে :)

Comments

সাম্পাত বাধে তার উত্তরে ২ বছর আগেও বলেছেন। আপনি নিজের লেখার আগে অন্যান্য উত্তর কেন পড়বেন না?

— তারাস ইয়ারেমকিভ

আরে, সাম্পাতের জন্য দুঃখিত, আমি তার উত্তর দেখতে পাইনি, আমি আমার উত্তরটি সংশোধন করার চেষ্টা করব এবং আরও সমাধান বা সহায়ক তথ্য যুক্ত করব।

— ভ্যাসিল গুটনিক

এটি একটি ভাল সমাধান, তবে এটি প্রতিটি আইকনকে একটি নীল পটভূমি দেয়। আশেপাশে কোন কাজ?

— জামশায়দ কামরান

@ কোডেটি এটি পরিষ্কার করতে বা নতুন পটভূমির রঙ যুক্ত করতে কেবল CSS ব্যবহার করুন। এটি কোনও সমস্যা হওয়া উচিত নয়।

— ভ্যাসিল গুটনিক 9

Answer 4

emবেস পরিমাপ হিসাবে ব্যবহার করে একটি বৃত্তে ফন্ট আইকন

যদি আপনি সহ পরিমাপ, জন্য EMS ব্যবহার line-height, font-sizeএবং border-radiusসঙ্গে text-align: centerএটি কিছু প্রশংসনীয় কঠিন করে তোলে:

#info i {
  font-size: 1.6em;
  width: 1.6em;
  text-align: center;
  line-height: 1.6em;
  background: #666;
  color: #fff;
  border-radius: 0.8em; /* or 50% width & line-height */
}

Answer 5

আপডেট: বরং ফ্লেক্স ব্যবহার করুন।

আপনি যদি নির্ভুলতা চান তবে এটি যাওয়ার উপায়।

বেহালার। খেলুন -> http://jsfiddle.net/atilkan/zxjcrhga/

এইচটিএমএল এখানে

<div class="sosial-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

এখানে সিএসএস রয়েছে

.sosial-links a{
    display: block;
    float: left;
    width: 36px;
    height: 36px;
    border: 2px solid #909090;
    border-radius: 20px;
    margin-right: 7px; /*space between*/

} 
.sosial-links a i{
    padding: 12px 11px;
    font-size: 20px;
    color: #909090;
}

আনন্দ কর

Comments

পাঠ্য-সারিবদ্ধকরণ: কেন্দ্র; এটি এফ-

— ইনফ্লুয়েশন

কিভাবে উল্লম্ব সারিবদ্ধ সম্পর্কে?

— লোকালহোস্ট

Answer 6

আপনি এটি করতে পারেন। আমি আমার আইকুমুন আইকনগুলির চারপাশে একটি বৃত্ত যুক্ত করতে চেয়েছিলাম wanted কোডটি এখানে।

span {
font-size: 54px;
border-radius: 50%;
border: 10px solid rgb(205, 209, 215);
padding: 30px;
}

Answer 7

আপডেট :

সম্প্রতি ফ্লেক্স শেখার পরে, একটি ক্লিনার উপায় রয়েছে (কোনও টেবিল এবং কম CSS নয়)। মোড়কে সেট করুন display: flex;এবং এটির কেন্দ্রস্থলে শিশুরা এটিকে align-items: center;(উল্লম্ব) এবং justify-content: center;(অনুভূমিক) কেন্দ্রীকরণের জন্য বৈশিষ্ট্য দেয় ।

এই আপডেট করা জেএস ফিডল দেখুন

---

আশ্চর্যজনক যে এর আগে কেউ এটিকে পরামর্শ দেয়নি .. আমি এটি করতে সর্বদা সারণী ব্যবহার করি। অনুভূমিক এবং উল্লম্ব সারিবদ্ধকরণের সাথে
কেবল তার অভ্যন্তরে একটি মোড়ক display: tableএবং কেন্দ্রের জিনিস তৈরি করুন maketext-align: centervertical-align: middle

<div class='wrapper'>
  <i class='icon fa fa-bars'></i>
</div>

এবং কিছু sass এই মত

.wrapper{
  display: table; 

  i{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }

}

অথবা এই জেএস ফিডল দেখুন

Comments

এটি একটি খুব সুন্দর এবং পরিষ্কার এবং ছোট এক! SCSS পরিবর্তে CSS এর সঙ্গে হেরস নামে একটি বেহালার jsfiddle.net/bqtkmy0s

— summsel

@ সুমসেল কি এটি আমার আসল উত্তরের মতো সঠিক জিনিস নয়? আপনি কেবল CSS তে কোড লিখেছেন, CSS নয়।

— nclsvh

হ্যা, অবশ্যই. আমি আপনার সমাধানটি সিএসএসে চেষ্টা করেছি এবং সেখানে প্রচুর লোক আছে সিএসএসকে অগ্রাধিকার দেওয়া। তাহলে কেন এই সিএসএস-সংস্করণটির jsfiddle পোস্ট করবেন না।

— সমষ্টি

Answer 8

এই পদ্ধতির আপনার ব্যবহারের জন্য দরকার নেই padding, শুধু সেট heightএবং widthজন্য aদিন flexসঙ্গে হ্যান্ডেল margin: 0 auto।

.social-links a{
  text-align:center;
	float: left;
	width: 36px;
	height: 36px;
	border: 2px solid #909090;
	border-radius: 100%;
	margin-right: 7px; /*space between*/
    display: flex;
    align-items: flex-start;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
} 
.social-links a i{
	font-size: 20px;
    align-self:center;
	color: #909090;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    margin: 0 auto;
}
.social-links a i::before{
  display:inline-block;
  text-decoration:none;
}
.social-links a:hover{
  background: rgba(0,0,0,0.2);
}
.social-links a:hover i{
  color:#fff;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="social-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

Answer 9

নীচের উদাহরণটি আমার পক্ষে বেশ কার্যকরভাবে কাজ করে নি, এটিই আমি সংস্করণে কাজ করেছি!

এইচটিএমএল:

<div class="social-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

সিএসএস:

.social-links {
    text-align:center;
}

.social-links a{
    display: inline-block;
    width:50px;
    height: 50px;
    border: 2px solid #909090;
    border-radius: 50px;
    margin-right: 15px;

}
.social-links a i{
    padding: 18px 11px;
    font-size: 20px;
    color: #909090;
}

Answer 10

এটা চেষ্টা কর

এইচটিএমএল:

<div class="icon-2x-circle"><i class="fa fa-check fa-2x"></i></div>

সিএসএস:

i {
    width: 30px;
    height: 30px;
}

.icon-2x-circle {
    text-align: center;
    padding: 3px;
    display: inline-block;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-box-shadow: 0px 0px 2px #888;
    -webkit-box-shadow: 0px 0px 2px #888;
    box-shadow: 0px 0px 2px #888;
}

Answer 11

ফন্ট আশ্চর্য আইকনগুলি: হিসাবে আগে .োকানো হয়। অতএব আপনি আপনার আই বা এটির মতো স্টাইল করতে পারেন :

.i {
   background: #fff;
   border-radius: 50%;
   display: inline-block;
   height: 20px;   
   width: 20px;
}

<a href="#"><i class="fa fa-facebook fa-lg"></i></a>

Answer 12

এই কোডটি ব্যবহার করে আপনি কেবল গোলাকার আইকন পেতে পারেন:

<a class="facebook-share-button social-icons" href="#" target="_blank">
    <i class="fab fa-facebook socialicons"></i>
</a>

এখন আপনার সিএসএস হবে:

.social-icons {
display: inline-block;border-radius: 25px;box-shadow: 0px 0px 2px #888;
padding: 0.5em;
background: #0D47A1;
font-size: 20px;
}
.socialicons{color: white;}

Answer 13

আমি ডেভ এভারিটের উত্তরটি «লাইন-উচ্চতা with সহ পছন্দ করি তবে এটি কেবল« উচ্চতা spec নির্দিষ্ট করে কাজ করে এবং তারপরে আমাদের লাইন-উচ্চতায় «! গুরুত্বপূর্ণ add যুক্ত করতে হবে ...

.cercle {
    font-size: 2em;
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em!important;
    background: #666;
    color: #fff;
    border-radius: 2em;
}

Comments

লাইন-উচ্চতাটি আমার জন্য এটি সমাধান করছিল

— মেকোগ্রাফ

যোগ !importantকরা কোনও ব্যান্ড-সহায়তা, কোনও সমাধান নয়। এর অর্থ হ'ল আপনার সম্পত্তি অন্য কোথাও ওভারাইড করে অন্য কোনও সিএসএস সম্পত্তি রয়েছে।

— টাইলারহহ

Answer 14

এটি এখন পর্যন্ত আমি খুঁজে পেয়েছি এটি সেরা এবং সুনির্দিষ্ট সমাধান।

সিএসএস:

.social .fa {
      margin-right: 1rem;
      border: 2px #fff solid;
      border-radius: 50%;
      height: 20px;
      width: 20px;
      line-height: 20px;
      text-align: center;
      padding: 0.5rem;
    }