Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Using icons in the navigation bar #2634

Closed
awibox opened this issue Apr 20, 2020 · 12 comments
Closed

Using icons in the navigation bar #2634

awibox opened this issue Apr 20, 2020 · 12 comments
Labels
closed: question This issue is a user error/misunderstanding.

Comments

@awibox
Copy link

awibox commented Apr 20, 2020

I want to use icons in navbar as in the screenshot:
Screenshot 2020-04-20 at 5 30 42 PM

Is this possible with docusaurus v2?
If not, how difficult is it to implement it?
@awibox awibox added status: needs triage This issue has not been triaged by maintainers closed: question This issue is a user error/misunderstanding. labels Apr 20, 2020
@sserrata
Copy link
Contributor

sserrata commented Apr 21, 2020 •
edited
Loading

Hi @awibox - it should be possible to swizzle and customize the Navbar component to add icon menu items. I can't speak to the difficulty level but my suggestion would be to wrap the icons in an Infima avatar, minus the additional text: https://facebookincubator.github.io/infima/docs/components/avatar#horizontal

Basically, add something like this to your custom Navbar component:

<div class="avatar">
  <a
    class="avatar__photo-link avatar__photo avatar__photo--sm"
    href="https://example.com"
  >
    <img
      alt="Your Alt"
      src="your/icon/path"
    />
  </a>
</div>

@lex111 lex111 mentioned this issue Apr 25, 2020
Merged
@lex111
Copy link
Contributor

lex111 commented Apr 27, 2020

In the upcoming version of D2, it will be possible to specify a custom CSS class for any navbar item.
I think this is enough to styling a navbar item in such a way as to add an icon.
As example, you can go to v2 website, it now uses the GH icon instead of text.

@lex111 lex111 closed this as completed Apr 27, 2020
@yangshun
Copy link
Contributor

Let's add some examples for this to the docs if possible.

@markphelps
Copy link

To get the GH icon instead of the 'GitHub' link in the header like on the v2 website, you can do the following:

Add to your GitHub navbar item the following properties in docusaurus.config.js:

 className: "header-github-link",
"aria-label": "GitHub repository",

So it ends up looking something like:

{
  href: "https://github.com/your/repo",
  position: "right",
  className: "header-github-link",
  "aria-label": "GitHub repository",
},

Then in your override styles (src/css/custom.css):

.header-github-link:hover {
  opacity: 0.6;
}

.header-github-link:before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
  content: "";
  display: flex;
  height: 24px;
  width: 24px;
}

@slorber
Copy link
Collaborator

slorber commented Jun 22, 2022

Note we also want to introduce custom navbar item components.

It's not available yet but there is a workaround you can use today: #7231

@Josh-Cena
Copy link
Collaborator

Josh-Cena commented Jun 22, 2022 •
edited
Loading

(Can also use an HTML item. If not because of the potential HTML bundle bloat I would migrate our own GH link to that.)

@Josh-Cena Josh-Cena removed the status: needs triage This issue has not been triaged by maintainers label Jun 22, 2022
@rcdailey
Copy link

rcdailey commented Sep 16, 2022 •
edited
Loading

@yangshun doesn't look that great with dark mode enabled. Is there something that looks closer to the way the react native site does it?
image

EDIT: This CSS works better: https://stackoverflow.com/a/69114751/157971

@danciaclara danciaclara mentioned this issue Nov 1, 2022
Closed
1 task
@qwertyvipul
Copy link

Adding to the @markphelps's solution, you might also want to add the dark theme style in your src/css/custom.css. (Refer here)

[data-theme='dark'] .header-github-link::before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

@da-kami da-kami mentioned this issue May 22, 2023
Open
@yuriyyakym
Copy link

This is CSS variation for making GitHub link consistent with theme toggle button.

Please pay attention to the classname change.

.header--github-link {
  width: 32px;
  height: 32px;
  padding: 6px;
  margin-right: 4px;
  border-radius: 50%;
  transition: background var(--ifm-transition-fast);
}

.header--github-link:hover {
  background: var(--ifm-color-emphasis-200);
}

.header--github-link:before {
  content: '';
  height: 100%;
  display: block;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
}

html[data-theme='dark'] .header--github-link:before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
}
State Result
Dark - default image
Dark - hover image
Light - default image
Light - hover image

You can adjust icon size by changing padding in .header--github-link.

@yuriyyakym yuriyyakym mentioned this issue Nov 14, 2023
Closed
@Goldziher
Copy link

To contribute to those who come here after - I used the solutions here and also added discord:

In the docusaurus.config.ts (or js) file:

			items: [
				{
					'aria-label': 'Discord Invite',
					'className': 'navbar--discord-link',
					'href': https://discord.gg/<invite-link>,
					'position': 'right',
				},
				{
					'aria-label': 'GitHub Repository',
					'className': 'navbar--github-link',
					'href': 'https://github.com/<repo>',
					'position': 'right',
				},
			]

And the css:

/* navbar */
.navbar--discord-link {
	width: 32px;
	height: 32px;
	padding: 6px;
	margin-right: 6px;
	margin-left: 6px;
	border-radius: 50%;
	transition: background var(--ifm-transition-fast);
}

.navbar--discord-link:hover {
	background: var(--ifm-color-emphasis-200);
}

.navbar--discord-link:before {
	content: '';
	height: 100%;
	display: block;
	background: url("data:image/svg+xml,%3Csvg fill='%23000000' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3Ediscord%3C/title%3E%3Cpath d='M20.992 20.163c-1.511-0.099-2.699-1.349-2.699-2.877 0-0.051 0.001-0.102 0.004-0.153l-0 0.007c-0.003-0.048-0.005-0.104-0.005-0.161 0-1.525 1.19-2.771 2.692-2.862l0.008-0c1.509 0.082 2.701 1.325 2.701 2.847 0 0.062-0.002 0.123-0.006 0.184l0-0.008c0.003 0.050 0.005 0.109 0.005 0.168 0 1.523-1.191 2.768-2.693 2.854l-0.008 0zM11.026 20.163c-1.511-0.099-2.699-1.349-2.699-2.877 0-0.051 0.001-0.102 0.004-0.153l-0 0.007c-0.003-0.048-0.005-0.104-0.005-0.161 0-1.525 1.19-2.771 2.692-2.862l0.008-0c1.509 0.082 2.701 1.325 2.701 2.847 0 0.062-0.002 0.123-0.006 0.184l0-0.008c0.003 0.048 0.005 0.104 0.005 0.161 0 1.525-1.19 2.771-2.692 2.862l-0.008 0zM26.393 6.465c-1.763-0.832-3.811-1.49-5.955-1.871l-0.149-0.022c-0.005-0.001-0.011-0.002-0.017-0.002-0.035 0-0.065 0.019-0.081 0.047l-0 0c-0.234 0.411-0.488 0.924-0.717 1.45l-0.043 0.111c-1.030-0.165-2.218-0.259-3.428-0.259s-2.398 0.094-3.557 0.275l0.129-0.017c-0.27-0.63-0.528-1.142-0.813-1.638l0.041 0.077c-0.017-0.029-0.048-0.047-0.083-0.047-0.005 0-0.011 0-0.016 0.001l0.001-0c-2.293 0.403-4.342 1.060-6.256 1.957l0.151-0.064c-0.017 0.007-0.031 0.019-0.040 0.034l-0 0c-2.854 4.041-4.562 9.069-4.562 14.496 0 0.907 0.048 1.802 0.141 2.684l-0.009-0.11c0.003 0.029 0.018 0.053 0.039 0.070l0 0c2.14 1.601 4.628 2.891 7.313 3.738l0.176 0.048c0.008 0.003 0.018 0.004 0.028 0.004 0.032 0 0.060-0.015 0.077-0.038l0-0c0.535-0.72 1.044-1.536 1.485-2.392l0.047-0.1c0.006-0.012 0.010-0.027 0.010-0.043 0-0.041-0.026-0.075-0.062-0.089l-0.001-0c-0.912-0.352-1.683-0.727-2.417-1.157l0.077 0.042c-0.029-0.017-0.048-0.048-0.048-0.083 0-0.031 0.015-0.059 0.038-0.076l0-0c0.157-0.118 0.315-0.24 0.465-0.364 0.016-0.013 0.037-0.021 0.059-0.021 0.014 0 0.027 0.003 0.038 0.008l-0.001-0c2.208 1.061 4.8 1.681 7.536 1.681s5.329-0.62 7.643-1.727l-0.107 0.046c0.012-0.006 0.025-0.009 0.040-0.009 0.022 0 0.043 0.008 0.059 0.021l-0-0c0.15 0.124 0.307 0.248 0.466 0.365 0.023 0.018 0.038 0.046 0.038 0.077 0 0.035-0.019 0.065-0.046 0.082l-0 0c-0.661 0.395-1.432 0.769-2.235 1.078l-0.105 0.036c-0.036 0.014-0.062 0.049-0.062 0.089 0 0.016 0.004 0.031 0.011 0.044l-0-0.001c0.501 0.96 1.009 1.775 1.571 2.548l-0.040-0.057c0.017 0.024 0.046 0.040 0.077 0.040 0.010 0 0.020-0.002 0.029-0.004l-0.001 0c2.865-0.892 5.358-2.182 7.566-3.832l-0.065 0.047c0.022-0.016 0.036-0.041 0.039-0.069l0-0c0.087-0.784 0.136-1.694 0.136-2.615 0-5.415-1.712-10.43-4.623-14.534l0.052 0.078c-0.008-0.016-0.022-0.029-0.038-0.036l-0-0z'%3E%3C/path%3E%3C/svg%3E");
}

html[data-theme='dark'] .navbar--discord-link:before {
	background: url("data:image/svg+xml,%3Csvg viewBox='0 -28.5 256 256' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid'%3E%3Cg%3E%3Cpath d='M216.856339 16.5966031 C200.285002 8.84328665 182.566144 3.2084988 164.041564 0 C161.766523 4.11318106 159.108624 9.64549908 157.276099 14.0464379 C137.583995 11.0849896 118.072967 11.0849896 98.7430163 14.0464379 C96.9108417 9.64549908 94.1925838 4.11318106 91.8971895 0 C73.3526068 3.2084988 55.6133949 8.86399117 39.0420583 16.6376612 C5.61752293 67.146514 -3.4433191 116.400813 1.08711069 164.955721 C23.2560196 181.510915 44.7403634 191.567697 65.8621325 198.148576 C71.0772151 190.971126 75.7283628 183.341335 79.7352139 175.300261 C72.104019 172.400575 64.7949724 168.822202 57.8887866 164.667963 C59.7209612 163.310589 61.5131304 161.891452 63.2445898 160.431257 C105.36741 180.133187 151.134928 180.133187 192.754523 160.431257 C194.506336 161.891452 196.298154 163.310589 198.110326 164.667963 C191.183787 168.842556 183.854737 172.420929 176.223542 175.320965 C180.230393 183.341335 184.861538 190.991831 190.096624 198.16893 C211.238746 191.588051 232.743023 181.531619 254.911949 164.955721 C260.227747 108.668201 245.831087 59.8662432 216.856339 16.5966031 Z M85.4738752 135.09489 C72.8290281 135.09489 62.4592217 123.290155 62.4592217 108.914901 C62.4592217 94.5396472 72.607595 82.7145587 85.4738752 82.7145587 C98.3405064 82.7145587 108.709962 94.5189427 108.488529 108.914901 C108.508531 123.290155 98.3405064 135.09489 85.4738752 135.09489 Z M170.525237 135.09489 C157.88039 135.09489 147.510584 123.290155 147.510584 108.914901 C147.510584 94.5396472 157.658606 82.7145587 170.525237 82.7145587 C183.391518 82.7145587 193.761324 94.5189427 193.539891 108.914901 C193.539891 123.290155 183.391518 135.09489 170.525237 135.09489 Z' fill='%235865F2' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

.navbar--github-link {
	width: 32px;
	height: 32px;
	padding: 6px;
	margin-right: 20px;
	margin-left: 6px;
	border-radius: 50%;
	transition: background var(--ifm-transition-fast);
}

.navbar--github-link:hover {
	background: var(--ifm-color-emphasis-200);
}

.navbar--github-link:before {
	content: '';
	height: 100%;
	display: block;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
		no-repeat;
}

html[data-theme='dark'] .navbar--github-link:before {
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
		no-repeat;
}

Note - i changed the css class names to start with "navbar" rather than header.

@slorber
Copy link
Collaborator

slorber commented Dec 18, 2023 •
edited
Loading

Note: with #9619 we are going to make it easier. You will soon be able to pass custom React components as navbar items directly.

@rtxa
Copy link

rtxa commented Aug 8, 2024 •
edited
Loading

Workarounds are good but unfortunately it look's awful in mobile view, I think it should fallback to normal text in that view.
160122953-bf1c4470-c475-415f-bef3-29385a90b427

Fixed with this code:

@media screen and (max-width: 996px) {
  .header-github-link::before {
    content: 'GitHub';
    background-image: none;
  }

  [data-theme='dark'] .header-github-link::before {
    content: 'GitHub';
    background-image: none;
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
closed: question This issue is a user error/misunderstanding.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests