As a backend developer, I prefer to use bootstrap or materialize css to design a web page, now I want to increase the size an icon, but the only way to do this, is by using pure css, but i have little knowledge about it, is there anyone who can help me to increase the size of this google icon:
I'am using materialize css:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
google icons links:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200" />
<div class="col">
<a href="{% url 'Create-Primary-Albums' %}"><span class="material-symbols-outlined">
create_new_folder
</span></a>
</div>
You can increase the icon size by increasing your font-size value in css. You can either use SaaS to modify your martialize CSS file or you need to add your custom css to increase the icon-size.
You can increase size by using in-line css. You can adjust the font-size value is pixel or other varients like rem to get the size you want. See the code below...
<div class="col">
<a href="{% url 'Create-Primary-Albums' %}">
<span class="material-symbols-outlined" style="font-size: 20px;">
create_new_folder
</span>
</a>
</div>
Related
I'm using NextJS and wanted to configure a top navigation header bar. In the left-hand side of my nav bar, I have a small svg and text that I would like to be Link's to the site's root. The Link component will not allow multiple children, so I have done this:
<Link href="/">
<div className="">
<img className="" src="/whistle.svg" />
<span className="">Root!</span>
</div>
</Link>
however, when I do this the entire div block loses it cursor-pointer and I need to then set a specific class of cursor pointer. I am also using tailwindCSS. I'm not sure what I'm doing wrong here in this instance - any help is appreciated!
<Link> must have <a> tag inside. You define your styles by yourself, so just add cursor pointer class of style to your div. You can add className="cursor-pointer" to your div instead of the style described.
<Link href="/">
<a>
<div className="" style={{cursor: 'pointer'}}>
<a>
<img className="" src="/whistle.svg" />
<span className="">Root!</span>
</a>
</div>
</a>
</Link>
next/link no longer requires manually adding as a child:
https://nextjs.org/blog/next-13#nextlink
import Link from 'next/link'
// Before
// Next.js 12: `<a>` has to be nested otherwise it's excluded
<Link href="/about">
<a>About</a>
</Link>
// Next.js 13: `<Link>` always renders `<a>`
<Link href="/about">
About
</Link>
I am using a materialize dropdown.
Without any icon the button looks ok, however if I add an icon like this:
{/* <!-- Dropdown Trigger --> */}
<a className='dropdown-trigger btn' href='#!' data-target='dropdown1'>Type<i className="large material-icons">arrow_drop_down</i></a>
The padding gets affected and the text goes down, see picture:
What would be the way to solve this? On the other hand is there any way to see or get materialize code into a project to check the code and check what the css classes do, so as to correct small issues like this or extend some?
By the way, I am using react.
Thanks
Edit: What I tried:
<div className="row" style={{alignItems:'center'}}>
<a className='dropdown-trigger btn' href='#!' data-target='dropdown1'>Type<i className="large material-icons">arrow_drop_down</i></a>
</div>
You can try to put the materalize helper valign-wrapper div under the a tag like this:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<a class='dropdown-trigger btn' href='#!' data-target='dropdown1'>
<div class="valign-wrapper">
Type<i class="large material-icons">arrow_drop_down</i>
</div>
</a>
In your case, the your code should be:
<a className='dropdown-trigger btn' href='#!' data-target='dropdown1'>
<div className="row" style={{alignItems:'center'}}>
Type<i className="large material-icons">arrow_drop_down</i>
</div>
</a>
I'm a total noob to Angular and Clarity. I'm at the very beginning of my project but the font size is very small. I've gone through the Clarity documentation and I'm not sure what I'm missing. For instance, p, .p1 should be a font size of 14px according to the documentation. Yet it appears very small in the browser (Chrome) and when I check my source code using developer tools it shows the font size as .583333rem which translates to 8px. Font size is small in my header as well. Any help or push in the right direction would be much appreciated. Thanks!
app.component.html
<clr-main-container class="main-container">
<app-header></app-header>
<div class="content-container">
<div class="content-area">
<router-outlet></router-outlet>
</div>
</div>
<app-footer></app-footer>
</clr-main-container>
header.component.html
<clr-header class="header header-1" *ngIf="showHeader() == true">
<button type="button" class="header-hamburger-trigger" aria-label="Open"><span></span></button>
<div class="branding">
<a class="nav-link">
<img src="../../../assets/images/logo.png">
</a>
</div>
<div class="divider"></div>
<div class="header-nav clr-nav-level-1">
<a class="nav-link" href="#" aria-label="Test1"><span class="nav-text">Test1</span></a>
<a class="nav-link active" href="#" aria-label="Test2"><span class="nav-text">Test2</span></a>
</div>
<div class="header-actions">
<a href="#" class="nav-link nav-icon" aria-label="Ticket">
<clr-icon shape="help"></clr-icon>
</a>
<clr-dropdown>
<button class="nav-text dropdown-toggle" clrDropdownToggle aria-expanded="true" aria-label="open user profile">
<clr-icon shape="user" size="24"></clr-icon>
{{ first_name }} {{last_name }}
<clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
<div clrDropdownItem>Change Password</div>
<div clrDropdownItem>Log Out</div>
</clr-dropdown-menu>
</clr-dropdown>
</div>
</clr-header>
Thank you both for your response! There wasn't anything conflicting with the CSS. I did a file search of the entire node_modules/clr directory and found several references to .583333rem in the clr-ui.min.css file. I went back to the Clarity documentation that says:
/*
* The following percentage would produce a UI that follows a design with a 32px vertical rhythm
* and 8px grid – 32 ÷ 0.192 = 166.66667.
*/
html{
font-size: 166.66667%;
}
I added this to my styles.css file and tada! I don't know if the Clarity documentation is wrong or misleading but I was under the impression from the typography section that the body text font is supposed to be 14px. Regardless, it's working and the larger font size no longer makes my eyes hurt. Thanks again!
This is related to the fact that Clarity uses an unusually large :root font-size of 24px. That's why it shows 14px on their website: 24px * 0.583333rem = 14px.
But if your :root font-size is smaller (as it should and probably is) it will show as way too small to read: 13.7 * 0.583333rem = 8px.
Solution: if you're OK with it, set your :root font-size, that you may find or declare on your global (s)css file, to 24px, like this:
:root { font-size: 24px }
P.S.: I can't understand why set the root font-size so big if you have to downsize everything afterwards.. this is a real question so, if someone knows the answer, please enlighten me.
I'm trying to make these social media icons larger in my Wordpress menu.
I used this code as a custom link in the menu:
<i class="fa fa-instagram"></i>
fa stands for FontAwesome, so your icons are a font. You can change their size by using font-size in your CSS.
just add font size to parent HTML tag. It'll works.
a { font-size: 100px; }
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-instagram"></i>
I want to put my font awesome icon and text paragraph into one line. How can I fix this code?
<div class="date" style="display: inline-block;">
<i class="fa fa-user-o" aria-hidden="true" style="float: left;"></i>
<p style="display: inline-block; text-align: right;float: left;" >10/01/2018</p>
</div>
Julia, remove all your floats:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="date">
<i class="fa fa-user-o" aria-hidden="true"></i>
<p style="display: inline-block" >10/01/2018</p>
</div>
Also you might make it this way:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="date">
<i class="fa fa-user-o"> 10/01/2018</i>
</div>
If your currently used font of the website has Icons Cheatsheet then you can have a set of icons of the third party. Here I would like to introduce “Font Awesome Icons”. This is a good-looking and popular set of icons.
To use this set, you need to add this code to the head section in your website (via OIW Blog):
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
– After adding CSS, you can use this code to put in the HTML which shows icons (you can apply this method to the part you use Cheatsheet of the font as mentioned above. Some fonts have unique way of using)
<i class="fa fa-user-o"></i>
If you don’t want the code in the HTML, you can just use CSS. With CSS you need to find the Class or ID of the part that displays icon and after that use the below CSS code to display it. Here I display the EDIT icon of the third party “Font Awesome Icons” before (::before) the title, along with 2 properties of padding-right and font-style (you can also display it after the title by using after property): #ohiwill
.date .fa::before {
font-family: "FontAwesome";
content: "\f044";
padding-right: 5px;
font-style: normal;
}